Các lĩnh vực khác : Thiết kế web/đồ hoạ

Ai chỉ dùm cách tại khung ban đầu của 1 trang web với ngôn ngữ ASP.NET

automail-noreply@dot.net.vn — Sun, 17 Aug 2008 08:13:39 GMT

Mình mới bắt đầu học .net, mình muốn tạo một trang Web bằng ASP.NET và viết bằng ngôn ngữ C# nhưng lại không biết tạo cái khung ban đầu của trang Web thế nào, ai biết chỉ dùm với

Xin tài liệu học MSQL

automail-noreply@dot.net.vn — Wed, 13 Aug 2008 20:20:10 GMT

Mình mới bắt đầu học MySQL nhưng chưa tìm được tài liệu nào dễ hiểu.Nếu các bạn có thì hãy share cho mình với.Mail của mình là: vutrung17986@gmail.com.Cám ơn các bạn nhiều,mong được sự giúp đỡ của các bạn

Minh vua moi tot nghiep.Minh chuan bi di lam ve thiet ke web

automail-noreply@dot.net.vn — Wed, 06 Aug 2008 11:05:17 GMT

Ban nao co bai mau Thiet ke Web su dung the DIV & CSS gui cho minh nhe'!Cam on moi nguoi nhiu lam'

học Flash

automail-noreply@dot.net.vn — Fri, 18 Jul 2008 10:03:43 GMT

Mình muốn làm Flash nhạc nhưng chẳng biết gì cả, có ai có tài liệu liên quan đến nó không chỉ mình với !
Thanks nhiều

Xoay chữ trên web

automail-noreply@dot.net.vn — Mon, 07 Jul 2008 10:09:26 GMT

Minh đang cần xoay một text trên web theo các góc độ nghiêng khác nhau , mình dùng

POSITION: absolute trong style nhưng chỉ được vị trí thẳng đứng của text chứ không nghiêng được theo góc.

Pác nào biết chỉ dùm với. Xin cảm ơn nhiều.

Mong sự góp ý của các bạn!!

automail-noreply@dot.net.vn — Wed, 25 Jun 2008 09:27:44 GMT

Mình muốn đi theo hướng lập trình Web nhưng ko biết bắt đầu từ đâu.Mong các bạn góp cho mình 1 chút về hướng đi này.VD như về những kiến thức mà minh cần trang bị (học ngôn ngữ nào ) và có trung tâm nào dạy duy nhất về web , cơ bản cũng đc.Thanks.

Quy trình thiết kế GUI cho Web site (IWP 1.1)

automail-noreply@dot.net.vn — Wed, 18 Jun 2008 15:45:18 GMT

Quy trình thiết kế GUI cho Web site dựa trên quy trình IWP 1.1 của iGURU Việt Nam.

Web là một kênh media mới, một kênh kinh doanh mới nhưng trong bài viết này iGURU Việt Nam chỉ đề cập khía cạnh kỹ thuật của thiết kế giao diện Web. Khi thiết kế Web như một media mới, quy trình thiết kế sẽ khác nhiều.

Bài viết của iGURU được đăng dưới dạng bản quyền Creative Commons Some Rights Reserved, theo Attribution-NoDerivs 2.5.

Xem Creative Commons tại http://my.opera.com/iguru/blog/2008/...eative-commons

Quy trình phát triển GUI cho Web site.

Thiết kế Giao diện dành cho Người sử dụng là một công việc trong quy trình phát triển một Web site. Tại Việt Nam, nhiều doanh nghiệp vừa và nhỏ không quan tâm chất lượng phần mềm, dịch vụ sau bán hàng mà thường quan tâm đến giao diện Web có đẹp hay không. Tuy nhiên đây lại là hạn chế của hầu hết các doanh nghiệp thiết kế Web. Trong phạm vi cho phép, chúng tôi xin trình bày các bước xây dựng Giao diện Web cho người sử dụng, nhằm giúp các bạn đạt hiệu quả thiết kế giao diện cao hơn.

Bài viết này không có tham vọng chỉ ra Marketing với Web như thế nào, nhưng việc hiểu về quy trình làm Web giúp các Marketer có phương pháp phối hợp tốt hơn qua đó phối hợp với nhà cung cấp dịch vụ Web của công ty, sản phẩm, dịch vụ đạt hiệu quả cao hơn.

Bài viết không đi sâu vào nghệ thuật thiết kế Web, bài viết chỉ ra các bước nên làm với một dự án thiết kế giao diện Web.
Quy trình được dựa trên Chuẩn IWP phiên bản 1.0 của IGURU. Bài viết có sử dụng 02 giao diện của Website bán hàng trực tuyến, Web site tin tức do iGURU thiết kế

Quy trình bao gồm các bước sau:
Bước 1: Xác định yêu cầu của khách hàng.
Bước 2: Phác thảo ý tưởng trên giấy
Bước 3: Đánh giá mẫu phác thảo
Bước 4: Thiết kế đồ hoạ bản đơn sắc
Bước 5: Phối màu cho giao diện Web
Bước 6: Xây dựng tài liệu về chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện.
Bước 8: Test giao diện trên các trình duyệt
Bước 9: Chuyển mã nguồn tới bộ phận phát triển Web

Bước 1: Xác định yêu cầu của khách hàng.
Mục tiêu của giai đoạn này là xác định chính xác yêu cầu hoặc tư vấn cho khách hàng. Yêu cầu là một điều kiện hoặc khả năng mà hệ thống phải tuân theo hoặc có. .

Nhiều khi khách hàng cũng không biết họ cần gì, nên khi xác định yêu cầu bạn nên xây dựng trước một biểu mẫu câu hỏi để lấy yêu cầu của khách hàng. Yêu cầu phải đạt những tiêu chí sau:

Yêu cầu phải bao quát giao diện, chức năng, cấu trúc nội dung, đối tượng xem Web site.
Trao đổi thông tin dựa trên các yêu cầu đã xác định trước khi tiếp cận khách hàng. Bạn phải nghiên cứu về yêu cầu chung của khách hàng trước khi tiếp cận.
Xây dựng bảng câu hỏi logic để chuyển đổi sang phân tích yêu cầu nghiệp vụ, yêu cầu hệ thống đơn giản, dễ dàng.
Đặt độ ưu tiên, lọc và theo dõi các yêu cầu.
Đánh giá khách quan các chức năng và hiệu năng.

Mẹo: để có thể hoàn thành Web nhanh chóng và chính xác nên đặt những câu hỏi:

Sau 3 năm nữa Web site sẽ phục vụ mục đích gì?
Hãy liệt kê các tính năng mà bạn nghĩ ra được và đặt theo thứ hạng: Bắt buộc, Mong muốn và Tuỳ chọn.
Bạn cho biết 03 Web site bạn ưa thích nhất, trong đó những điểm nào làm bạn thích và những điểm nào bạn chưa thích?

Bước 2: Phác thảo ý tưởng trên giấy
Mục tiêu của bước này là định hình bố cục của trang Web.

Nào giờ là lúc bạn thể hiện hoa tay của mình, để linh hoạt trong việc phác ý tưởng, bạn nên sử dụng bảng vẽ, bút chì, thước kẻ và tẩy. Dựa vào kinh nghiệm thành công của bạn, bạn thấy những tiêu chuẩn nào nên có, ví dụ các tiêu chuẩn sau của IWP 1.0:

Banner không quá 1/3 màn hình thực của người sử dụng (màn hình thực là màn hình của trình duyệt có thể xem được trang Web, đã bỏ đi các thanh tool bar của trình duyệt Web).
Sitebar không lớn quá 25% chiều rộng trang Web.
....

Bạn cũng nên xây dựng chuẩn bố cục dựa trên nội dung đối với toàn bộ Web site. Web site là tập hợp của những trang Web, mỗi trang Web tập hợp các nội dung có mối liên quan hoặc không giữa các trang Web. Dựa vào nội dung, bạn chia trang Web làm 02 vùng:

Vùng template (theo chuẩn IWP)
Vùng hiệu chỉnh.

Vùng template là vùng không hiệu chỉnh hoặc hiệu chỉnh rất ít xuyên suốt các trang Web của Web site.
Vùng hiệu chỉnh là vùng có thay đổi nội dung trong hầu hết các trang Web của Web site.
Bạn nên cân nhắc trước khi xác định vùng nào là vùng template hoặc vùng hiệu chỉnh, vì việc này sẽ ảnh hưởng đến xây dựng mã CSS, HTML chung của giao diện Web site.

Bạn cũng nên quy chuẩn các đối tượng trong bố cục để dễ trình bày, quản lý, theo dõi. Ví dụ: Ảnh là hình chữ nhật có đánh dấu x; chữ là đường kẻ,...
Nếu đây là một dự án phức tạp bạn nên tham khảo quy trình RUP và kết hợp với quy trình này để ra một giải pháp quản lý dự án phù hợp hơn.

Ví dụ:

Bước 3: Đánh giá mẫu phác thảo
Mục đích của bước này là đánh giá mẫu phác nào phù hợp với yêu cầu, mong muốn của khách hàng. Để tìm hiểu sâu hơn về thiết kế Web và Thương hiệu bạn xem các bài viết khác tại iGURU Blog.

Bạn nên có tối thiểu 03 mẫu phác trên giấy, sau đó bạn treo lên tường và mời những người khác cùng xem và đánh giá. Mẫu phác thảo đạt những yêu cầu phải trả lời được những câu hỏi như sau:

Họ thích mẫu nào?
Mẫu thiết kế có đáp ứng các yêu cầu của khách hàng không?
Tìm thông tin, chức năng có dễ không?
Đứng xem, bạn có thấy bố cục có rời rạc không? Có thẩm mỹ không?

Nếu câu trả lời không đạt yêu cầu trên bạn nên ngồi lại và vẽ tiếp, điều này sẽ giúp bạn giảm chi phí nhiều nếu bạn sử dụng máy tính để thiết kế. Sau khi chọn được một mẫu chúng ta chuyển sang bước 4.

Bước 4: Thiết kế đồ hoạ bản đơn sắc
Mục tiêu của bước này là đánh giá bản phác trên giấy khi chuyển sang Đồ hoạ vi tính bố cục có phù hợp với yêu cầu và mong muốn của khách hàng hay không.

Sau khi phác thảo xong, bạn sử dụng công cụ đồ hoạ máy tính để thiết kế mẫu giao diện Web. Đầu tiên chúng ta cần xem bố cục trên Máy tính có hợp lý không, chính vì vậy chúng ta chưa phối màu cho các mảng màu, đường kẻ, chữ cho trang Web, tất cả các bạn để thang màu xám để bước tiếp theo phối màu dễ dàng hơn. Nếu bạn phối màu trong giai đoạn này bạn sẽ phải đối mặt với hai rủi ro: Sai bố cục và sai phối màu. Tuyệt đối không để màu trắng và đen với những vùng muốn phối màu khác hai mầu trên.

Nếu bạn sử dụng công cụ đồ hoạ, chúng tôi đề xuất sử dụng Photoshop CS2 để áp dụng các chuẩn thiết kế giao diện dễ dàng hơn. Ví dụ đặt tên, sắp xếp folder, phân cấp folder, áp màu cho layer,...

Với iGURU, một số chuẩn dùng trong thiết kế đồ hoạ vi tính được định nghĩa như sau:

Web site chia ra 3 phân vùng chính với tên viết hoa bằng tiếng Anh: TOP, MIDDLE, BOTTOM. Ba phân vùng này tương ứng với phần trên cùng, phần thân và chân trang Web.
Trong các phân vùng, để phân biệt các vùng khác nhau thì được đặt tên tương tự nhưng có dấu chấm “.” trước tên. Ví dụ: .TOP, .MIDDLE, .BOTTOM, .LEFT, .RIGHT
Hình ảnh và Chữ được phân bố vào 02 thư mục riêng: IMG và TXT
…

Sau khi căn chỉnh bố cục và thiết kế xong, bạn nên in ra và lại treo lên tường mời mọi người đến đánh giá giống như bước 3. Đánh giá hiện giờ cần phải trả lời những câu hỏi như sau:

Tìm thông tin, chức năng có dễ không? Không dễ vì sao? Do độ tương phản, kích cỡ, …?
Trình bày thông tin quan trọng có dễ tìm với giới hạn của màn hình thực hay không?
Giao diện có dễ đọc, dễ sử dụng với người dùng mục tiêu hay không?
Giao diện có thể hiện ra tính cách riêng hay không?
….

Ví dụ:

Bước 5: Phối màu cho giao diện Web
Khi bản đơn sắc đạt yêu cầu, bạn chuyển sang phối màu cho giao diện Web. Khi phối màu cho giao diện bạn nên tuân thủ các phương pháp chẳng hạn như sau:

Dựa vào màu sắc yêu cầu từ bảng câu hỏi để đưa ra phương pháp phối màu cho Web site. Có 1 màu chủ đạo, 1 màu thứ cấp và các màu chỏi để tăng phần sinh động cho Web.
Với màu nền là màu pha gam xám sẽ có kiểu phối màu riêng. Ví dụ phần nội dung sẽ có màu đỏ, vàng chanh, vàng, cam, xám, da trời,… tuỳ thuộc vào mục đích của Web site.
Với text nên tối đa 3 màu, 3 font, 3 cỡ chữ, 3 kiểu chữ, 3 kiểu trace, kerning.
…

Mẹo: Giai đoạn phối màu rất dễ bị ảnh hưởng bởi màu sắc của ảnh ( ví dụ banner).
Đây là điểm có lợi nhưng cũng là điểm có hại cho thiết kế giao diện Web site. Nhiều người ban đầu chọn ảnh cuốn hút và truyền đạt chính xác thông điệp của Web site và giờ họ chèn vào để lấy cảm hứng thiết kế từ ảnh. Một số người không có kiến thức về media hoặc không có đánh giá đúng mức hiệu quả của ảnh đem lại cho Web site, họ chọn những tấm ảnh không đúng thông điệp, từ đó họ thiết kế nhầm mầu sắc do ảnh hưởng từ ảnh.

Ví dụ:

Bước 6: Xây dựng chuẩn CSS, clientsite script, ảnh, folder cho trang Web
Mục đích của giai đoạn này giúp Web site dễ bảo trì, giảm mã, nội dung hiển thị tốt hơn với tỉ lệ mã thấp, linh động trong định nghĩa kiểu. Và quan trọng hơn, nó giúp cả quy trình sản xuất, triển khai, bảo trì ít rủi ro hơn.

Các chuẩn bao gồm:

Định nghĩa vùng của site, trang Web, các vùng trong một thẻ DIV
Chuẩn đặt tên cho nhãn CSS, ảnh
Chuẩn đặt tên cho các thư mục chứa các thành phần của trang Web
Chuẩn đặt tên cho tệp tin CSS, HTM, JS, XML

Ví dụ trong một thẻ DIV chúng ta định nghĩa như sau:

TL: Top-Left: Chỉ vị trí trên cùng, bên trái
TC: Top-Center: Chỉ vị trí trên cùng chính giữa
TR: Top-Right: Chỉ vị trí trên cùng, bên phải
ML: Middle-Left: Chỉ vị trí làm việc bên trái
MR: Middle-Right: Chỉ vị trí làm việc bên phải
BL: Bottom-Left: Chỉ vị trí dưới cùng, bên trái
BC: Bottom-Center: Chỉ vị trí dưới cùng chính giữa
BR: Bottom-Right: Chỉ vị trí dưới cùng, bên phải

Mẹo: người thực hiện bước 1 5 phải có tư duy về HTML, CSS và lập trình để từ đó đưa ra một giải pháp GUI tận dụng được điểm mạnh của các công nghệ ứng dụng vào phát triển Web. Ở mức độ cao cấp hơn, những người này phải có kiến thức sâu rộng về Thương hiệu, Media, Marketing, Bán hàng, Chăm sóc khách hàng, từ đó cô đọng quy trình hoạt động trên thành những vòng lặp có thể kiểm soát từ đó áp dụng vào thiết kế giao diện.

Bước 7: Sử dụng các ngôn ngữ đánh dấu, lập trình để thiết kế giao diện
Mục đích của giai đoạn này là thiết kế Web bằng HTML, CSS ( Flash, JS, AJAX, … nếu có)

Chúng ta chuyển tải giao diện đồ hoạ sang trang Web.

Nếu bạn chỉ sắp xếp bố cục, kết cấu của trang Web thì nên dùng HTML. Bạn có thể sử dụng chương trình Adobe ImageReady CS2 để cắt ảnh ra thành trang Web.
Nếu bạn muốn dàn trang, định kiểu cho các kết cấu của trang Web, bạn nên sử dụng CSS và bước 6 rất có ích với bạn.

Công việc của một người thiết kế Web lúc này giống như một người lập trình nhiều hơn là một nhân viên thiết kế. Anh ta chỉ cần hiểu rõ cách biểu diễn phông chữ, màu sắc, canh lề, các loại đường, nét, chiều cao, độ rộng, ảnh nền các loại, ảnh, xác định vị trí cho các khối… sao cho giống các bản thiết kế đồ hoạ nhất.

Mẹo: người thực hiện thực hiện bước này phải hiểu thấu đáo về HTML, CSS, JS nếu không giao diện sẽ hiển thị không như bản vẽ đồ hoạ vi tính trên nhiều trình duyệt khác nhau.

Bước 8: Kiểm thử giao diện trên các trình duyệt
Mục tiêu của giai đoạn này là kiểm soát việc hiển thị chính xác trang Web như giao diện đồ hoạ của bước 5 trên các trình duyệt Web khác nhau.

Tối thiểu chúng ta phải kiểm soát việc hiển thị đúng như giao diện thiết kế trên các trình duyệt:

Microsoft Internet Explorer các phiên bản 5, 6, 7 và thời gian tới là 8
Firefox 1.5+
Safiri
Opera
Netscape
Mozilla

Mỗi Web site đều nhắm đến một số phân khúc khách hàng, có một định vị và thị trường mục tiêu. Rất ít Web site có thể phục vụ tốt toàn bộ các trình duyệt Web, nên bạn cần nghiên cứu người dùng cuối mục tiêu của mình dùng trình duyệt Web nào và thiết kế sao cho hiển thị tốt trên các trình duyệt đó.
Nghe đến đây chắc hẳn bạn sẽ vò đầu bứt tai sao mà phức tạp thế! Bạn yên tâm, với kinh nghiệm của iGURU Việt Nam, một người chưa biết về CSS chỉ cần học với chuyên gia 4 giờ/ ngày trong vòng 1 tuần là có thể sử dụng thành thạo CSS.

Mẹo: người thực hiện bước này nên tìm các đoạn mã hack CSS để ứng dụng vào việc thiết kế trang Web cho nhiều trình duyệt. Tải sách tại: http://iguru.vn/forum/forumdisplay.php?f=33
Người thực hiện việc thiết kế CSS cũng nên theo dõi người truy nhập vào Web ( ví dụ từ Google Analytics), từ đó tổng hợp số liệu sử dụng trình duyệt Web của họ để có thể liên tục cập nhật mã CSS cho trang Web, giúp trang Web hiển thị tốt theo xu hướng sử dụng trình duyệt của người dùng cuối.

Bước 9: Chuyển mã tới bộ phận lập trình
Mục tiêu của giai đoạn này là chuyển các trang Web hiển thị tốt trên các trình duyệt chính cùng với các thành tố của trang Web tới bộ phận lập trình.

Phải chắc chắn bộ phận lập trình cũng hiểu được yêu cầu bắt buộc của giao diện và chuẩn thiết kế của bước 6. Thông thường các yêu cầu và chuẩn này được quản lý dự án hoặc trưởng nhóm thông báo trước để các bộ phận không hiểu nhầm nhau.

Các yêu cầu bắt buộc và chuẩn thiết kế không chỉ được chuyển tới bộ phận lập trình mà còn chuyển tới bộ phận kiểm thử ( test) để họ có thể xây dựng các kịch bản kiểm thử, thông qua đó họ kiểm tra được chất lượng của dự án. Nếu có phát sinh lỗi, họ sẽ thông báo lại bộ phận thiết kế và lập trình để sửa lỗi.

Tham khảo:

Quy trình IWP 1.1 của iGURU Việt Nam
Mẫu giao diện do iGURU Việt Nam thiết kế cho thị trường quốc tế và Việt Nam
Blog iGURU Việt Nam

Tải phiên bản PDF: http://files.myopera.com/iguru/blog/...b29.4.2008.pdf
Phiên bản PDF mô tả chi tiết hơn bài viết trên Blog
Traceback: http://my.opera.com/iguru/blog/quy-t...iet-nam-iwp1-1

đưa flash video lên web

automail-noreply@dot.net.vn — Thu, 05 Jun 2008 16:25:17 GMT

mình không đưa lên web đươc có biêt chỉ giúp với khi dua len thi tren server có can cai them gi khong vay

tài liệu design website

automail-noreply@dot.net.vn — Sat, 31 May 2008 11:25:39 GMT

tài liệu lập trình tại đây

Cho hoi ve, dat bieu tuong yahoo tren web site.

automail-noreply@dot.net.vn — Fri, 30 May 2008 22:00:46 GMT

Minh muon dat mot bieu tuong cua yahoo messenger vao website, khi minh dang nhap vao yahoo, thi bieu tuong yahoo tren website cung online, va click vao co the chat voi minh.

Các nguyên tắc cơ bản thiết kế một Logo

automail-noreply@dot.net.vn — Tue, 20 May 2008 10:36:20 GMT

Bài viết này nhằm mục đích cung cấp cho các công ty Thương hiệu, thiết kế Việt Nam cũng như các cá nhân yêu thích đồ hoạ một cái nhìn tổng quát về Thiết kế Logo. Bài viết giới hạn ở ý niệm không đi sâu vào kỹ năng thiết kế đồ hoạ.

Xin cảm ơn công ty PTC đã đồng ý san sẻ tài liệu Nội bộ công ty cho mọi người, các thương hiệu nổi tiếng Thế Giới cho phép công bố mẫu logo và ý nghĩa của logo tới mọi người, cám ơn tác giả tài liệu thiết kế logo với Phong thuỷ (không rõ tác giả).

Bài viết cũng được đăng tại: Diễn đàn tin học Việt Nam, Diễn đàn cộng đồng Marketing Việt Nam, Diễn đàn đồ hoạ thế giới, Diễn đàn Cộng đồng Marketing thế giới, http://blog.360.yahoo.com/ixx2u

(Còn tiếp)

Xin gửi lời cảm ơn đến bài viết này nếu bạn thấy hữu ích

Xin tài liệu photoshop tiếng việt!

automail-noreply@dot.net.vn — Fri, 16 May 2008 09:05:00 GMT

Bà con ơi, có ai có tài liệu photoshop tiếng việt không share cho tớ nhé! Cảm ơn nhiều. Mail của tớ lesangtht@yahoo.com

Cho em hỏi về nhúng nhạc vào HTML bằng đường dẫn tương đối để nghe trên Firefox ?.

automail-noreply@dot.net.vn — Sat, 10 May 2008 11:52:38 GMT

Em lấy trên mạng đoan code này.
<code><embed showdisplay="0" showstatusbar="1" showcontrols="1" autostart="0"
type="application/x-mplayer2
" src="liên kết" space="0" align="middle" height="69" width="304">
</embed></code>

Nhưng khi nhúng vào HTML thì nghe được trên IE bằng đường dẫn tương đối và tuyệt đối.Nhưng khi chạy bằng Firefox thì chỉ nghe được bằng đường dẫn tuyệt đối chứ không nghe được bằng đường dẫn tương đối.Dù đã cài Quitck time khi firfox yêu cầu.Các bác viết lại hộ em đoạn code trên để chạy với Firefox bằng đường dẫn tương đối với.
Cám ơn các bác trước nha.

NHIỀU SẢN PHẨM ĐỒ HOẠ 2D+3D & TÀI LIỆU MIỄN PHÍ CHO MỌI NGƯỜI YÊU ĐỒ HOẠ!

automail-noreply@dot.net.vn — Sat, 10 May 2008 01:57:40 GMT

NHIỀU SẢN PHẨM ĐỒ HOẠ 2D+3D & TÀI LIỆU MIỄN PHÍ CHO MỌI NGƯỜI YÊU ĐỒ HOẠ!
http://gallery.ngoctiendesign.com/cpg/index.php
http://gallery.ngoctiendesign.com/cpg/index.php?cat=9