PDA

View Full Version : Quy Trình làm WEB



Spirit
14-03-2008, 05:20
Quy trình làm web được quy thành 16 bước như sau.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite1.png
BƯỚC 1: THẢO LUẬN CHUNG

Đầu tiên là quá trình chát-chit, nói chuyện với sếp hoặc khách hàng .

Đầu tiên bạn (có thể 1 mình bạn đảm nhận vai trò của cả designer và programmer, hoặc bạn là trưởng nhóm) cần phải xác định quy mô công việc, cũng như xác định rõ vai trò, trách nhiệm (ai sẽ người chuẩn bị nội dung, hình ảnh, ai sẽ lo về hosting, tên miền, upload, bảo trì, những việc mà vốn dĩ, CÓ THỂ không phải là của bạn)
http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite2.png
BƯỚC 2: PHÁC THẢO TỔNG THỂ.

Mọi người sẽ thảo luận (brainstorming) về cấu trúc của website. Ở đây ta phải thống nhất về khái niệm design (thiết kế). Thiết kế không phải chỉ là những gì được nhìn thấy (look and feel) mà bao gồm cả chức năng. Phần việc này trách nhiệm sẽ đặt nặng lên đôi vai của designer (dù thực tế là khách nói sao thì vẫn phải làm vậy thôi, nhất là ở VN).

Chúng ta sẽ làm rõ. Điều gì là quan trọng nhất cho site, mục đích của site là gì, người xem là ai, điều gì không quan trọng, mỗi trang cần có gì. Tùy vào quy mô của website, có thể phải vẽ ra cả sitemap đưa cho khách hàng.
http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite3.png
BƯỚC 3: CHUẨN BỊ KHUNG SƯỜN

Khung sườn ở đây là xương sống của website, tức là các chức năng, các liên kết, và nội dung các phần của trang web cuối cùng. Nhớ rằng ta KHÔNG SỬ DỤNG HÌNH ẢNH trong phần này.

Với site quy mô nhỏ, phần này có thể vẽ tay, hoặc dùng Illustrator, Photoshop.

Với 1 site có quy mô tương đối lớn, cần làm phần này bằng HTML (nhắc lại: tối thiểu hóa việc dùng hình ảnh) để khách hàng có thể click chuột thử nghiệm, đảm bảo rằng các trang web đều nằm đúng chỗ của nó. Tôi tạm gọi cái này cái này là HTML Prototype. Đây là minh họa để thống nhất về mặt chức năng trước khi tổ chức code, nếu giai đoạn này không thống nhất thì những thay đổi về sau sẽ rất mất thời gian. Giai đoạn này cũng giúp khách hàng, designer và programmer có cùng chung 1 cái nhìn tổng thể về website. NẾU vì quá gấp gáp ta bỏ qua giai đoạn này thì sau này có thể chúng ta sẽ phải trả giá ĐẮT.
http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite4.png
BƯỚC 4: THIẾT LẬP NỘI DUNG.

Sau khi đã có Phác Thảo Tổng Thể và Khung Sườn, bạn và khách hàng cần ngồi lại với nhau để đặt kế hoạch cho nội dung - tôi nhấn mạnh là NỘI DUNG, tức là phần TEXT sẽ hiện thị ra, đây là phần rất mất thời gian, đặc biệt là cho khách hàng.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite5.png
BƯỚC 5: BẮT ĐẦU THIẾT KẾ.

Lúc này designer đã có thể bắt đầu thiết kế trang chủ và những trang con. Nếu thời gian quá gấp, và bên programmer rất giỏi và phối hợp tốt với bên design thì có thể bắt đầu luôn việc viết xHTML và CSS, thậm chí 1 số chức năng về JS.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite6.png
BƯỚC 6: KHÁCH HÀNG PHẢN HỒI.

Khi thiết kế cơ bản là xong, khách hàng cần kiểm tra xem thiết kế có đúng ý tưởng ban đầu chưa, và có thể đề nghị 1 số thay đổi.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite7.png
BƯỚC 7: DESIGNER THIẾT KẾ LẠI.

...theo yêu cầu của khách hàng...

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite8.png
BƯỚC 8: KHÁCH HÀNG CHẤP NHẬN.

...cho đến khi mọi bên đều happy.

Các bước 5-6-7: thiết kế-phản hồi-tái thiết kế sẽ lặp lại trong nhiều giai đoạn của dự án. Như vậy, bên cạnh việc chuẩn bị nội dung, khách hàng cũng có trách nhiệm liên tục xem xét và xác nhận thiết kế. Tất nhiên với những dự án quá nước rút, trách nhiệm này được giao trọn vào tay designer (không những làm hộ mà còn nghĩ hộ khách hàng lun, hic, hic).

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite9.png
BƯỚC 9: THIẾT KẾ CHI TIẾT.

Sau khi khách hàng đồng ý với thiết kế cơ bản, bạn sẽ tiến hành thiết kế các trang con.

Với các site qua mô lớn, có thể bạn sẽ phải thiết kế cả những trang hướng dẫn và những trang thông báo lỗi nữa.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite10.png
BƯỚC 10: ĐỒNG Ý.

Khách hàng xem lại thiết kế các trang 1 lần nữa và đồng ý lần cuối cùng.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite11.png
BƯỚC 11: XÂY DỰNG NỘI DUNG HTML (content layer).

Bước này do Programmer làm sau khi nhận bản thiết kế bằng hình vẽ của bạn. Để công việc tiến hành trôi chảy, bạn cần mô tả cho họ rõ ràng các thông số về web như: font chữ, mã màu chữ và nền, viền, phần cố định kích thước bao nhiêu, phần nào là co giãn được...đồng thời cung cấp cho Programmer toàn bộ các chất liệu/số liệu cần thiết như: file PSD, file AI, file PNG, các file Icon, file swf và fla (nếu làm cả Flash), file Photoshop thì cần chia cụ thể các layer...

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite12.png
BƯỚC 12: XÂY DỰNG CSS (presentation layer).

Bước 11 và 12 có thể gộp chung thành: "Xây Dựng HTML và CSS" vì thường người làm CSS cũng là người làm HTML. Nhưng để nhấn mạnh tầm quan trọng của CSS, tôi tách nó ra thành 1 bước riêng. Thực ra ngay khi làm HTML thì đã phải tính toán sẽ áp dụng kỹ thuật CSS và JS nào cho tối ưu.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite13.png
BƯỚC 13: VIẾT Javascript (behavior layer).

Nếu website lớn thì có thể cần người phụ trách riêng mảng này.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite14.png
BƯỚC 14: GIỚI THIỆU CHO KHÁCH HÀNG.

Bạn và khách sẽ thống nhất về giao diện.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite15.png
BƯỚC 15: TEST SẢN PHẨM HOẶC GHÉP NỐI VỚI CƠ CẤU HOẠT ĐỘNG CỦA TRANG WEB (server side).

Đối với web tĩnh, đến bước này là coi như hoàn thiện sản phẩm, cần kiểm tra 1 lần nữa là có thể đưa lên server.

Đới với web động, ngay từ bước 4, bạn có thể đã cần triển khai làm những phần cơ bản (core) để sau này ghép với layout của phần "web tĩnh" vừa tạo ra.

Nhân tiện nói qua về web động, web động chẳng qua là sự sinh ra web tĩnh 1 cách TỰ ĐỘNG ở trên server dựa trên thiết kế web tĩnh đã có.

Đến bước 15 này, bạn sẽ tiến hành các thao tác ghép nối.

http://goldenlotusarts.com/images/howtomakeawebsite/howtomakeawebsite16.png
BƯỚC 16: ĐƯA WEBSITE VÀO HOẠT ĐỘNG

Quá trình thiết lập cơ cấu hoạt động của trang web không đơn giản, nhưng tạm thời ta không nói đến quy trình này.

Sau khi quá trình ghép nối và kiểm thử thành công. Nếu như hợp đồng không bao gồm việc bảo trì và nâng cấp trang web, quá trình coi như hoàn tất.

----------------
Nguồn - Dịch: CSS QUESTIONS (http://my.opera.com/cssquestions/blog/)

thongtinlaptop
14-03-2008, 09:19
Thích nhất mấy cái hình minh họa, thanks!

tiểu_sư_phụ
15-03-2008, 01:26
bài viết của bạn rất sinh động và hay, vừa có hình minh họa giúp dễ hiểu hơn :D

stroveman
15-03-2008, 21:08
Bài viết quá tuyệt. Thank anh nhiều.:D

vnmarser
15-03-2008, 21:46
http://www.vinamaso.net <== quy trình của site này thế nào, bác Spirit biết không :emlaugh:
Nó hoàn toàn không theo cái quy trình bên trên lol

le hoang phu
15-03-2008, 22:01
anh có thể chỉ cho em cách tạo trang web ko da

leonidas_124
13-09-2008, 09:35
http://pingmag.jp/2005/12/09/the-website-development-process/
Day la ban goc ENGLISH cho bai viet nay

kinhdoanh.inga
13-09-2008, 09:45
anh có thể chỉ cho em cách tạo trang web ko da
To <b>le hoang phu</b>: Bạn có thể sử dụng OWeb http://www.owebframework.com để xây dựng 1 website cho mình :D.

ĐÂY LÀ MỘT CÔNG CỤ XÂY DỰNG WEBSITE ĐỘNG HOÀN TOÀN MIỄN PHÍ

Xem thông tin chi tiết về OWeb tại: http://www.owebframework.com

Xem website demo xây dựng bằng OWeb tại: http://demo.owebframework.com

Download OWeb tại đây : http://www.owebframework.com/?u=fli

Xem thảo luận tại: http://www.ddth.com/showthread.php?t=216155

Oweb - Công nghệ phục vụ cộng đồng

jiSh@n
13-09-2008, 15:35
@kinhdoanh.inga : 1 sản phẩm dù tốt đến mấy, hoàn hảo đến mấy nhưng có cách quảng cáo vô cùng phản cảm thì sẽ khó có cơ hội chứng tỏ với ngưới khác.