Tài liệu này được upload và download miễn phí tại website: http://hutonline.

net

Quy trình làm web

Nguồn: http://my.opera.com/cssquestions/blog/

Đây có lẽ là bài viết cuối cùng của blog này, vì CSS cũng ko có nhiều thứ để nói, hơn
nữa sự quan tâm của mọi người tới chủ đề này không nhiều. Có lẽ sắp tới Tuấn sẽ chuyển
sang một tên miền riêng và làm 1 blog với chủ đề rộng hơn (và có thể "vĩ mô" hơn 1 chút,
hehe), có thể là cả quản lý dự án, rồi các lĩnh vực khác trong IT nói chung và thiết kế web
nói riêng, không bó hẹp trong CSS.

Nhằm tăng cường sự phối hợp trong đội ngũ làm web với nhau cũng như với "người đặt
hàng" (có thể là khách hàng, sếp, hoặc đồng nghiệp khác của bạn, hoặc có thể là chính
bạn - nếu bạn tự thực hiện ý tưởng của mình), dựa trên kinh nghiệm bản thân và tham
khảo 1 blog khác, Tuấn viết (/dịch) bài viết này.

Quy trình làm web được quy thành 16 bước như sau.

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 .
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

Đầ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)

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

BƯỚC 7: DESIGNER THIẾT KẾ LẠI.

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

BƯỚC 8: KHÁCH HÀNG CHẤP NHẬN.

 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

...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).

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.

BƯỚC 11: XÂY DỰNG NỘI DUNG HTML (content layer).

 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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...

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.

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.

 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.
 Tài liệu này được upload và download miễn phí tại website: http://hutonline.net

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.

THE END.