Quy trình phát triển Web từ A đến Z


Bạn đang tìm hiểu cách thức phát triển WEB site?
Bạn đang muốn khởi tạo WEB site mà chưa biết bắt đầu từ đâu?
Vậy thì bài viết này là dành cho bạn. Tôi sẽ chỉ ra cho bạn rất cụ thể và dễ hiểu tất tần tật quy trình phát triển WEB – từ cách thức order sao cho hiệu quả, hợp lý; cho đến giai đoạn xuất bản WEB.

Kì thực, có rất nhiều cách thức để phát triển 1 WEB site. Còn tại Bridge System – công ty Nhật Bản đi đầu trong lĩnh vực phát triển WEB, sẽ đi theo 1 quy trình thống nhất như sau:

Quy trình cơ bản để phát triển WEB site

Những bước cơ bản luôn cần khi phát triển WEB site: Thiết kế cơ bảnPhát triểnTest và xuất bản WEB (public)

Đầu tiên, việc lên các đầu mục thiết kế cơ bản là vô cùng quan trọng: tạo ra các cấu trúc các trang trên WEB site, lên mock-up, lên khung thiết kế cơ bản cho trang chủ và các trang con, các bản thiết kế mẫu và thiết kế theo trải nghiệm người dùng.
Trong giai đoạn phát triển, việc đăng ký nội dung trang WEB, mã hoá (code), cài đặt & phát triển nhiều tính năng đa dạng, cài đặt các Plug-ins, phát triển các form mẫu đăng ký – những giai đoạn này là bước trung tâm của quy trình phát triển WEB, và được thực hiện dựa trên các bản thiết kế đã tạo từ trước.
Đối với giai đoạn Test (kiểm tra) và public, chúng ta cần kiểm duyệt kĩ lưỡng nội dung WEB site đã phát triển, kiểm tra khả năng vận hành và xuất bản WEB site.

Chuẩn bị sơ bộ trước khi order một trang WEB

Hãy chuẩn bị sẵn những đầu mục sau đây:

Tiêu đề trang WEB

Trong trường hợp trang web của công ty, tên công ty, dịch vụ hoặc cửa hàng online, tên của họ sẽ chính là tiêu đề của trang WEB.

Tag line

Tag line là từ/câu nói ngắn gọn nhằm thể hiện dịch vụ, sản phẩm, thông điệp của doanh nghiệp theo cách ấn tượng nhất. Một số câu tagline nổi tiếng như:

  • “City Oasis” Renoir
  • “After all, Inaba, even if you ride 100 people, it’s okay,” Inaba Works
  • ‘Intel, I’m Intel’
  • “A single vacuum cleaner with unchanged suction” Dyson
  • “Work remaining on map” Taisei Corporation

Logo

Nếu Quý khách hàng order dịch vụ phát triển WEB tại Bridge System, hãy chuẩn bị sẵn file logo công ty với chất lượng hình ảnh tốt. Định dạng tệp là JPG, PNG, PSD. Nếu có file gốc định dạng Ai hoặc Eps là tốt nhất.

Dịch vụ・Mô tả tóm tắt về doanh nghiệp

Vui lòng chuẩn bị các nội dung liên quan tới thông tin công ty, pamphlets, tờ rơi, PowerPoint… các tài liệu mô tả đầy đủ về doanh nghiệp, nội dung dịch vụ/danh sách sản phẩm.

Cùng với đó, hãy chỉ ra những điểm khác biệt của doanh nghiệp Quý khách so với đối thủ, những điểm nổi bật/ đặc tính thương hiệu mà Quý khách muốn nêu rõ và làm nổi bật.

Quý khách đã có tên miền (domain) và server chưa?

Nếu Quý khách đã có sẵn tên miền hoặc máy chủ độc lập từ yêu cầu phát triển Homepage, chúng tôi sẽ cung cấp thông tin.

Vui lòng chuẩn bị sẵn ID và mật khẩu dành cho tên miền của mình để đăng nhập vào bảng điều khiển của công ty tên miền, ID và mật khẩu để đăng nhập vào bảng điều khiển cũng như server của WEB.

Địa chỉ Email đại diện công ty

Hãy chuẩn bị sẵn địa chỉ email đại diện cho công ty sẽ xuất hiện trên WEB site. Quý khách có thể sử dụng các cấu trúc email như sau: info@XXXXXXX.com hoặc support@XXXXXX.co.jp.

Ngay cả khi Quý khách là đơn vị hợp tác với Facebook và Instagram, thì việc đưa ra địa chỉ email đại diện cũng không phải lo ngại về mức độ bảo mật.

Chúng tôi đề xuất Quý khách nên có được một địa chỉ email đại diện có thể được quản lý bởi đại diện công ty và nhà điều hành web. Bởi nếu sử dụng tài khoản email của nhân viên phụ trách thì sẽ không ổn định. Vì trong một vài trường hợp thường gặp, tài khoản của người phụ trách dùng để đăng ký Facebook hoặc tên miền gặp phải sự cố thì sẽ rất ảnh hưởng tới WEB site chung của công ty.

Thiết kế cơ bản

Đối với mục này, chúng tôi sẽ thiết kế nền tảng cơ bản của trang chủ. Có rất nhiều nhiệm vụ đa năng trong thiết kế cơ bản, được đề cập như dưới đây:

Bridge SystemKhách hàng của chúng tôi
Thiết lập sitemapThiết lập sitemapKiếm tra / duyệt sitemap

 

Thiết lập tên miềnLựa chọn và đề xuất những tên miền phù hợpLựa chọn tên miền phù hợp nhất
Cài đặt server (máy chủ) phát triển WEBThực hiện cài đặt máy chủ · Thiết lập thông báo URLKiểm tra kết nối server
Đặt tiêu đề trangTrình bày tiêu đề trang WEB
Thiết lập tag lineTạo ra tag lineLực chọn tag line
 

Logo

Chuẩn bị các file logo (Từ 500px trở lên, định dạng PNG / JPG, Ai / Psd)
FaviconTạo ra Favicon (Tiêu chuẩn / Màn hình hiển thị võng mạc)
Nghiên cứu / Thiết lập từ khoá /Nghiên cứu / Thiết lập từ khoáLựa chọn và xác lập từ khoá
Lên MockupLên MockupKiểm duyệt Mockupp
Thiết kế trang chủ cơ bảnThiết kế bản draft cơ bản cho trang chủLựa chọn và kiểm duyệt bản thiết kế trang chủ
Cài đặt PermalinkCài đặt Permalink
Cài đặt ngôn ngữThiết lập Plug-in ngôn ngữ · Cài đặt · Thiết lập plug-in dịch
Cài đặt Time zoneCài đặt Time zone
Lựa chọn
Viết nội dung
Dịch nội dung

Site map

Site map là sơ đồ cấu hình tổng thể của trang WEB. Chúng tôi tạo ra site map để nắm bắt nội dung ước tính của toàn bộ trang web tại thời điểm thiết lập.

Tên miền

Tên miền có thể tạo mới hoặc tiếp quản tên miền chúng tôi đã tạo sẵn. Khi tạo một tên miền mới, Quý khách không thể tạo một tên miền có tên giống như tên miền đã có sẵn mà phải chọn tên khác, bởi mỗi tên miền chủ được dùng một lần.

Nếu Quý khách muốn tiếp tục sử dụng tên miền hiện tại, vui lòng chuẩn bị ID và mật khẩu đăng nhập vào DNS (Hệ thống tên miền)

Thiết lập development server

Việc phát triển trang web được thực hiện trên development server. Development server được kết nối với Internet và bị khoá bằng ID và mật khẩu, nhưng Quý khách luôn có thể kiểm tra trạng thái phát triển qua Internet bất cứ lúc nào.

Nghiên cứu・Thiết lập từ khoá

Chúng tôi lựa chọn ra những từ khoá chính để phát triển cho từng trang của WEB site. Từ đó chúng tôi xác định được những từ khoá này liệu có xung đột với nhau trên WEB hay không. Ví dụ, mặc dù rất dễ dàng để nhận thấy “diet” là một từ khoá quan trọng, nhưng đây là một từ khoá rất rộng nên nhiều đối thủ khác cũng sử dụng từ khoá này. Vì vậy, Quý khách có thể lựa chọn từ khoá hẹp hơn (từ khoá liên đới), như: “diet natural supplement”.

Mock-up

Mock-up là một sơ đồ tổng hợp các thành phần cấu tạo nên trang WEB. Mock-up không phải là một bản kế hoạch thiết kế. Mock-up dùng để điều chỉnh, phân loại nội dung và sắp xếp hợp lý, đưa vào mỗi trang WEB. Nhờ có Mock-up, ta có thể dễ dàng biết được các nội dung có đầy đủ/ phù hợp không, mối liên kết và sự sắp xếp nội dung theo từng trang đã ổn chưa, và các button, đường link liệu đã được chèn phù hợp?

Tạo ra mẫu thiết kế cơ bản

Dựa theo mock-up đã đưa ra, chúng tôi sẽ tạo ra một bản thiết kế cơ bản, Trong mục này, Quý khách hoàn toàn có thể đưa ra các quy chuẩn thiết kế chi tiết, dựa trên quy tắc phối màu, thiết lập font chữ, thiết kế sidebar, button và cách phối màu nền (Background color).

Trong giai đoạn này, chúng tôi sẽ đưa ra nhiều mẫu thiết kế với những phong cách, định hướng khác nhau để Quý khách có thể cân nhắc, lựa chọn bản thiết kế mà Quý khách cảm thấy yêu thích và phù hợp nhất với thương hiệu của mình.

Lưu ý: Trong trường hợp đã lựa chọn phương án thiết kế và tiến hành phát triển web (Development), việc thay đổi bản thiết kế mới sẽ phát sinh thêm chi phí và gây chậm trễ cho quá trình hoàn thiện sản phẩm cuối cùng. Vì vậy, sau khi hoàn thành mỗi giai đoạn, chúng tôi sẽ gửi các phương án cho khách hàng để phía Quý khách chốt phương án lựa chọn và chúng ta sẽ bước vào giai đoạn triển khai tiếp theo.

Cài đặt permalink (Liên kết cố định)

Permalink chính là yếu tố quyết định URL nào sẽ đại diện cho từng trang của Homepage. Permalink có khả năng ảnh hưởng đến cả hệ thống và SEO, vì vậy việc tuân thủ các quy tắc được quyết định ở giai đoạn phát triển ban đầu là điều rất cần thiết.

Liên kết cố định là quy tắc quyết định URL nào đại diện cho từng trang của trang chủ. Permalink là một mục có ảnh hưởng đến cả hệ thống và SEO, vì vậy điều quan trọng là phải tuân thủ các quy tắc được quyết định ở giai đoạn phát triển ban đầu.

Cài đặt ngôn ngữ・Cài đặt múi giờ (Time zone)

Cài đặt ngôn ngữ hiển thị và múi giờ phù hợp với vị trí khu vực để sử dụng WEB site một cách thuận tiện nhất.

Copywriting・Dịch(optional)

Viết tiêu đề, mô tả, văn bản nội dung, tiêu đề, vv được hiển thị trên mỗi trang của WEB site. Chúng tôi luôn chú trọng việc đưa keyword (từ khoá) vào tiêu đề, header, nội dung của trang WEB/ bài viết theo nhiều hướng khác nhau một khách hợp lý và hiệu quả nhất.

Phát triển (development)

Trong giai đoạn này, chúng tôi sẽ bổ sung đầy đủ nội dung và tạo ra nhiều tính năng cho WEB.

BSCKhách hàng
Mẫu pageThiết kế・CodeChốt bản thiết kế
Mẫu bài postThiết kế・CodeChốt bản thiết kế
Mẫu HeaderThiết kế・CodeChốt bản thiết kế
Mẫu FooterThiết kế・CodeChốt bản thiết kế
Mẫu SidebarThiết kế・CodeChốt bản thiết kế
Thiết kế trang chi tiết・CodeThiết kế・CodeChốt bản thiết kế
Thiết kế form mẫu chi tiết・CodeTạo ra form chi tiết・Test
Cài đặt SEO title (Tiêu đề SEO)Cài đặt
Cài đặt Meta descriptionCài đặt
Cài đặt keyword chínhCài đặt
Cài đặt nội dung nền tảngCài đặt
Kiểm tra trang chi tiếtKiểm tra trang chi tiết/ duyệt
Kiểm tra liên kết (link)(Liên kết nội bộ・Liên kết ngoài)Kiểm tra
Kiểm tra Alt ảnhKiểm tra
Tối ưu bản hiển thị mobileTối ưu bản hiển thị mobileKiểm tra
(Lựa chọn thêm)
Loại post tuỳ chỉnhPhát triểnKiểm tra hoạt động/ duyệt
Tích hợp hệ thống bên ngoàiPhát triểnKiểm tra hoạt động/ duyệt
Phát triển tuỳ chỉnh khácPhát triểnKiểm tra hoạt động/ duyệt

Chúng tôi sẽ dựa vào mẫu thiết kế cơ bản đã được phê duyệt từ phía Quý khách hàng để code các mục: header, footer, body. v.v. và tạo ra mẫu cho WEB site. Sự nhất quán trong việc căn lề, khoảng cách giữa các dòng, các đoạn, kích cỡ màn hình, đáp ứng hiển thị chính xác trên nhiều thiết bị khác nhau: di động, trình duyệt chính, Windows, Mac. v.v.

Thiết kế trang chi tiết

Nội dung của từng trang chi tiết sẽ được tạo ra ngay sau khi bản mẫu WEB site hoàn thiện. Những yếu tố sau không thể thiếu khi thiết kế trang chi tiết trong WEB site: vị trí của văn bản, thứ tự & vị trí của hình ảnh, video, tập hợp các cột và các hàng, button, link liên kết, v.v…

Ở giai đoạn này, Quý khách hàng có cái nhìn sát thực về trang WEB cụ thể của mình như thế nào và cũng có thể hình dung ra những trang chi tiết.

Nếu có bất cứ thay đổi nào về Tiêu đề, nội dung, chúng tôi sẽ thông báo ngay để Quý khách hàng luôn nắm được tình hình.

Form đăng ký

Một trong những yếu tố quan trọng gây tác động mạnh mẽ tới khả năng gia tăng hiệu quả Sales là CTA(Lời kêu gọi hành động). Một trang WEB có CTA hấp dẫn, phù hợp, được đặt để đúng lúc đúng chỗ sẽ mang lại lượt đăng ký rất cao từ phía khách hàng (quyết định conversion rate cao). Cùng với đó là cách thiết kế và hiển thị form đăng ký cũng góp phần quyết định lớn tới việc gia tăng số lượng khách hàng.

Cài đặt SEO

SEO (tối ưu hoá công cụ tìm kiếm) là cách thức có thể đưa WEB site của Quý khách hiển thị trên TOP kết quả tìm kiếm của Google. Để làm được điều này, trước hết chúng ta cần thiết lập một số mục sau:

Thiết lập tiêu đề SEO (SEO title): cài đặt tiêu đề SEO với những từ khoá tìm kiếm được đề xuất

Cài đặt mô tả meta: Viết đoạn mô tả ngắn để tóm tắt nội dung mỗi trang

Cài đặt keyword chính (từ khoá chính): cài đặt từ khoá mà chúng ta mong muốn khách hàng sẽ tìm kiếm ở mỗi trang.

Cài đặt nội dung nền tảng: Những trang quan trọng, muốn được khách hàng đọc và tìm hiểu kỹ thì cần được cài đặt nội dung nền tảng.

Kiểm tra

Khi nội dung trên WEB site đã được hoàn thiện, chúng ta cần kiểm tra xem liên kết nội bộ (internal link) liên kết đến trang bên ngoài (external link) có hoạt động chuẩn không. Ngoài ra, cũng cần thiết lập lại thẻ Alt (kiếm tra từ khóa dùng cho hình ảnh) để đạt được hiệu quả SEO tốt.

Tối ưu bản mobile

Trong những năm gần đây, lượt truy cập WEB site từ các thiết bị di động tăng đáng kể. Có những WEB site đo được 60%-70% lượt người dùng truy cập đến từ mobile. Chính vì thế, WEB site cần được thiết kế sao cho phù hợp không chỉ với laptop mà cần phải được hiển thị một cách tối ưu trên các thiết bị di động khác nhau. Trên thực tế, nhiều phiên bản WEB site được thiết kế rất đẹp mắt khi truy cập bằng máy tính, tuy nhiên lại bị lỗi khi hiển thị trên mobile. Vì vậy, chúng ta cần đặc biệt lưu ý tới một số mục sau: layout có được hiển thị đầy đủ không? Khoảng cách các dòng, đoạn, cột có bị xê dịch không? Chữ có quá to/quá bé?Button và link đã chuẩn chưa? Khi click vào form đăng ký, có xảy ra vấn đề gì không? CTA (lời kêu gọi hành động) có dễ nhìn, ấn tượng? v.v.

Tuỳ chỉnh post (Optional)

Thông thường, các trang WordPress bao gồm page (trang) và post (bài đăng). Nhưng đối với một số trang Business, có những trường hợp xuất hiện chức năng cơ sở dữ liệu đơn giản (simple database function). Mốt số ví dụ có thể kể đến như: phía doanh nghiệp cần tạo hồ sơ công việc, dữ liệu tour du lịch hoặc danh sách tài sản.

Khi xây dựng cơ sở dữ liệu này trên trang WEB, Quý khách cần xây dựng một cơ sở dữ liệu kiểu bài đăng tùy chỉnh (Custom post type).

Trong trường hợp trang WEB sử dụng loại bài đăng tùy chỉnh, chúng tôi sẽ thiết kế, phát triển và kiểm tra cơ sở dữ liệu.

Tích hợp hệ thống bên ngoài

Tại Bridge System, chúng tôi không chỉ xây dựng một trang WEB độc lập mà hướng đến xây dựng một môi trường kinh doanh tích hợp với nhiều hệ thống đám mây bên ngoài khác nhau như Google Sheet, Mailchimp, Salesforce.com, Facebook và nhiều ứng dụng khác.

Chúng tôi sử dụng API để liên kết với hệ thống bên ngoài, nhưng tích hợp các hệ thống này trên máy chủ thử nghiệm (test server để kiểm tra xem dữ liệu input / output có chuẩn xác hay không.

Test・Xuất bản

Chúng tôi tiến hành test dưới nhiều hình thức khác nhau để xuất bản WEB site chuẩn xác nhất.

BSCKhách hàng
Production server migrationCài đặt mobile
Thiết lập Google AnalyticsCài đặt
Cài đặt Google Search ConsoleCài đặt
Cài đặt XML sitemapCài đặt
Cài đặt Robots.txtCài đặt
Đổi URL đăng nhậpCài đặtXác nhận URL đăng nhập
Kiểm tra linkKiểm tra
Kiểm tra hình ảnh hiển thịKiểm tra
Spelling checkerKiểm tra
Kiểm tra form đăng kýKiểm traKiểm tra form đăng ký
Kiểm tra tích hợp SNSKiểm tra
Kiểm tra mobileKiểm traXác nhận & kiểm duyệt bản mobile hiển thị

Sau khi hoàn thành phát triển WEB site trên máy chủ thử nghiệm (Test server), chúng tôi sẽ chuyển vị trí tới máy chủ sản xuất (Production server). Do máy chủ phát triển và máy chủ sản xuất có những đường dẫn URL khác nhau, chúng tôi sẽ kiểm tra liệu bố cục (layout) và hình ảnh (image) có hiển thị chính xác hay không. Bên cạnh đó, nhờ việc di chuyển đến máy chủ https, chúng ta có thể ngăn chặn sự cố liên kết và hiển thị thu gọn.

Cài đặt Google Analytics/Search Console

Để nắm rõ được tình trạng người dùng truy cập vào trang WEB, Google Analytics và Search Console là công cụ trợ giúp đắc lực cho những người quản trị WEB. Ngay sau khi máy chủ sản xuất được di chuyển, chúng tôi sẽ thiết lập nhiều tính năng khác. Một trong những công cụ theo dõi tình hình, số liệu SEO hàng ngày và cực kì hữu ích là Nightwatch – chúng tôi có thể cài đặt công cụ này để Quý khách có thể theo dõi tình hình WEB site của mình hàng ngày, hàng tuần.

Thiết lập XML sitemap・Robot.txt

Mỗi khi trang WEB được cập nhật, chúng tôi sẽ gửi một bản cập nhật cho trang web của Google bằng cách tạo một XML sitemap (sơ đồ trang web XML). Cùng với đó, Robots.txt cũng được khởi tạo để cho phép / hạn chế quyền truy cập vào trang web vào rô bốt tìm kiếm (trình thu thập thông tin).

Kiểm tra link, hình ảnh hiển thị và chính tả

Trước khi public (xuất bản) trang WEB, chúng tôi sẽ kiểm tra kỹ lưỡng các đường link, hình ảnh và lỗi chính tả của tất cả các trang.

Kiểm tra form đăng ký

Kiểm tra kỹ lưỡng các form đăng ký xem có phù hợp và hoạt động tốt hay không.

Kiểm tra liên kết SNS

Kiểm tra xem các bài post được đăng trên trang chủ có hoạt động với Facebook hay Twitter không.

Kiểm tra trên thiết bị di động

Kiểm tra xem trang WEB được mở trên điện thoại di động có được hiển thị chính xác và tối ưu không

Xuất bản

Mở khoá server mới và công khai.

Kết luận

Trên đây là bài viết về quy trình đầy đủ để Phát triển Homepage.

Thông thường, phát triển 1 trang Landing page sẽ cần 2 – 3 tuần; 1 trang website công ty chung cần 4 – 6 tuần và những trang WEB thương mại điện tử/ WEB site có dạng bài đăng tuỳ chỉnh thì cần 5 – 7 tuần.

Trong thực tế, khi thực hiện quy trình phát triển WEB site, khi kết thúc một giai đoạn, sẽ phát sinh một số vấn đề cần sửa chữa/ giải quyết, vì vậy thời gian có thể bị xê dịch so với ước tính ban đầu. Do đó, để quy trình làm việc được diễn ra nhanh chóng và thuận lợi hơn, sau khi hoàn thành một giai đoạn, chúng tôi sẽ kiểm ta và gửi cho Quý khách hàng kiểm duyệt, sau đó mới tiến hành bước tiếp theo.

©2019 Bridge System Co., Ltd.

Bridge System Co., Ltd.

Log in with your credentials

Forgot your details?