Quy trình làm web

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, tôi viết (/dịch) bài viết này.

Quy trình làm web trong thực tế đượ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 .

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


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.


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.


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.


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.

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


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

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.


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.


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.


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.

Nguồn : http://ohisee.com/dd/showthread.php?tid=326

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: