Blog đã chuyển sang địa chỉ OhIsee.com

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

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

Để tiện cho việc dịch thuật và đọc hiểu các tài liệu CSS tiếng Anh tôi sẽ tập hợp và bổ sung 1 số thuật ngữ tiếng Anh dần dần vào bài viết này:

Tag = thẻ (trong CSS thì các tag còn gọi thuộc về nhóm gọi là selector, từ selector tạm thời tôi chưa biết dịch thành cái gì cho hợp). Ví dụ: p, img, br, h1, h2, ... là các tag (thẻ). Đây là thứ hay được dùng nhất trong HTML, có thể nói mỗi thẻ là một viên gạch xây dựng nên ngôi nhà HTML.

CSS = Cascading Style Sheets = thật khó dịch từ này, tốt nhất cứ giữ nguyên nó là CSS mà không dịch là hay nhất, nó có nghĩa là 1 bảng các thuộc tính cho các tag, dựa trên cấu trúc của tag. Cái này được ví như khung nhà và sơn nhà vậy, không có nó thì web sẽ không thể có màu sắc và không thể sắp xếp đẹp đẽ như ta thấy.

Opening Tag (hay Start Tag) = Thẻ mở , ví dụ <h1>, <p>, <div>

Closing Tag (hay End Tag) = Thẻ đóng, ví dụ </h1>, </p>, </div>

Content = nội dung, đây thường là 1 dòng chữ giữa thẻ mở và thẻ đóng.

Element = phần tử web, nó bao gồm cả thẻ mở, thẻ đóng và nội dung ở giữa 2 thẻ đó. Khi làm quen với CSS thì element là một khái niệm quan trọng và hay được nhắc đến. Đôi khi để ngắn gọn ta gọi element là div, vì khi làm việc bằng CSS ta hay dùng thẻ div (đương nhiên đây là cách gọi sai, nhưng do thói quen 1 số người hay gọi như thế).

Để làm rõ các khái niệm trên, ta ví dụ, ta có dòng sau: <h1>một số chữ ... </h1> , thì ở đây <h1> là thẻ mở, </h1> là thẻ đóng, content là dòng chữ "một số chữ..." còn element là toàn bộ 3 thứ đó.

Một số thẻ không hề có thẻ mở, thẻ đóng, và đương nhiên không có cả nội dung bên trong. Ví dụ như thẻ img , ta viết <img src="an-image.jpg" /> , hoặc thẻ br, ta viết <br />, rõ ràng ở đây không hề có thẻ đóng </img> hay </br>

Ta gọi những thẻ như thế là : single tag = thẻ đơn, hay là empty element = phần tử rỗng (đa số sách CSS dùng từ empty element)

Trên thực tế, một thẻ có thể có cấu trúc phức tạp hơn những gì tôi vừa nêu, tôi ví dụ .... à, mà thôi, để khi khác rảnh tôi tiếp vậy, bb các bạn.


(continue...)