EM RẤT THÍCH LÀM WEB

Học thiết kế hoặc lập trình web hay được gọi nôm na là học làm web. Quá trình học làm web thì phải nói là gian khổ, không phải 1 – 2 ngày là có thể làm dc 1 website đẹp “lung linh – lấp lánh – lập lòe” được đâu, mà nó đòi hỏi phải có thời gian, đó là một khoảng thời gian tương đối dài để bạn rèn luyện, học tập, trao dồi thêm các kĩ năng. Do đó, việc yêu thích làm web sẽ giúp cho bạn có thêm quyết tâm, và chính quyết tâm sẽ giúp cho bạn có thêm nhiều động lực trong quá trình học.

Tuy nhiên, bạn cũng không nên học một cách “cháy máy”, mà hãy bình tỉnh và thông thả. Khi nào bạn cảm thấy thật sự mệt mỏi, hãy quên nó đi một thời gian, điều đó sẽ tốt cho bạn hơn là cố gắng gượng ép nó vào đầu, sẽ gây tắc động tiêu cực đấy.

CHÚNG TA HỌC CÁI GÌ?

Trước tiên bạn hãy trả lời cho mình câu hỏi như sau: “Bạn muốn trở thành gì? Lập trình web hay thiết kế web, hay là cả hai?”. Tại sao lại có câu hỏi như vậy thì chúng ta sẽ phân tích công việc của các mãng trên nhé.

+ LẬP TRÌNH WEB

Lập trình web thì đòi hỏi bạn cần phải dành nhiều thời gian để học tập các ngôn ngữ căn bản dành cho thiết kế web tĩnh : HTML, CSS, Jquery, Javascript và các ngôn ngữ website động như PHP & MySQL, ASP & SQL, … Ngoài ra bạn còn phải tìm hiểu thêm về các CMS (mã nguồn mở) như WordPress, Joomla, Drupal…. Và tất nhiên, nâng cao hơn nữa thì bạn còn phải biết và làm việc được trên các Framework như: Codelgniter, Zend, Yii,…. Tất nhiên chúng ta ko học hết các CMS và Framework, mà chỉ chọn ra một cái để tìm hiểu chuyên sâu thôi, còn lại thì chỉ cần biết sơ qua là được.

Và tất nhiên, khi bạn đi phỏng vấn ở các công ty tuyển lập trình viên website thì họ sẽ không chỉ hỏi bạn ở các kiến thức chuyên môn không đâu, mà họ còn hỏi bạn có biết xài photoshop không? Vì bạn thường xuyên phải làm công việc chuyển từ PSD > HTML&CSS. Do đó, bạn phải biết photoshop là điều tất yếu.

Bạn cũng không phải chỉ dừng lại ở những kiến thức đã học không. Mà phải liên tục cập nhật kiến thức mới. Ví dụ: sắp tới thì HTML5 & CSS3 sẽ dần trở nên phổ biến hoặc Jquery, WordPress, Joomla luôn cập nhật các bản sửa lỗi mới. Và nhà cung cấp trình duyệt cũng thường xuyên nâng cấp trình duyệt của họ, điều đó cũng dẫn tới việc code đang chạy ở phiên bản cũ sẽ mắc lỗi và bạn phải cập nhật.

+ THIẾT KẾ WEB

Đây là một cái nghệ mà con đường đi khá chông gai, không phải chăm chỉ mà được, bạn còn đòi hỏi phải có được cái đầu thiên phú nữa (khác người xíu). Mình nói vậy không phải để làm nản lòng các bạn mà mình muốn các bạn hiểu một điều, chúng ta phải cố gắng hết mình, thì sẽ đạt được thành công.

Vì ngày nay, các công ty hầu như họ đều muốn mang một phong cách riêng để định vị thương hiệu của mình. Và ngay cả website của họ thì họ cũng mong muốn có điều đó, phải thật đặc biệt, không giống bất kì website nào khác, phải có phong cách riêng. Và bản thân là một webdesigner thì bạn phải làm được điều đó.
Vậy, mình làm việc đó như thế nào nhỉ? Điều đâu tiên đó là phải có ý tưởng đã, sau đó chúng ta phải biết dùng các công cụ đồ họa như Photoshop, illustrator, corel, ….. Không chỉ dừng lại ở biết không đâu, mà bạn phải hiểu thật chuyên sâu và tường tận nó, chỉ có như thế thì bạn mới họa được cái ý tưởng “lạ” ở trong đầu của mình ra.

Và điều tất nhiên là bạn cũng phải biết lập trình nữa chứ. Vì khi bạn thiết kế 1 website thì bạn cũng phải tính toán xem liệu thiết kế của mình có thể dể dàng chuyển thành HTML&CSS hay là phải làm khó anh lập trình web. Đôi khi, thì chính bạn cũng sẽ là người phải thực hiện việc chuyển từ PSD > HTML&CSS nữa ấy chứ. Khi đã là một webdesigner thì bạn luôn nghĩ ra những hiệu ứng độc đáo cho website của mình, và để làm được điều đó thì bạn phải biết đến Jquery, để bạn biết rằng, cái hiệu ứng gì Jquery có thể làm được và không thể làm được.

QUÁ TRÌNH TỰ HỌC NHƯ THẾ NÀO?

Điều này thì đơn giản thôi, nếu bạn đã xác định được mình sẽ đi theo lĩnh vực nào? Thì việc còn lại là tiến hành tìm tòi, học hỏi và nghiên cứu thôi.

Điều bắt buộc là bạn phải học từ căn bản đi lên nâng cao và chuyên sâu, vì kiến thức của con người cũng một cái cây và vì vậy nên cái cây phải có gốc chắc chắn thì ngọn mới đứng vững và chịu được gió to. Nếu bạn cứ nhầm nâng cao mà đâm đầu vào thì chắc chắn sẽ phải “chảy máu mũi” thôi. Và cái nghiêm trọng nhất chính là bị “lổ hổng kiến thức”. Lổ hổng kiến thức sẽ làm cho bạn mắc phải lỗi lớn nhất là chỉ có thể làm được những gì đã được hướng dẫn qua, không thể hoặc khó khăn trong việc tự phát triển được cái mới cho mình.

Học ở đâu nhỉ? À, câu hỏi gây cấn đây, nếu bạn quyết tâm thì hãy đến các trung tâm, các bạn sẽ được học theo trình tự hợp lý, và rất tốt cho não. Hiện tại thì ở Tp.HCM có các trung tâm đào tạo về lập trình và thiết kế web khá uy tính như TTTH của ĐH Khoa học Tự nhiên, hay nếu có điều kiện một xíu thì NIIT hay Aptech. Học ở trung tâm thì chúng ta sẽ có thêm bằng cấp, hổ trợ cho sau này.
Nếu muốn tìm tòi học hỏi thì càng đơn giản hơn, chỉ cần có một cái máy tính có nối mạng là ổn rồi, các bạn có thể vào izwebz và học thôi, ngoài ra các bạn có thể tham khảo thêm bài viết “Nguồn của tôi” nữa để biết thêm.

Các bài viết trên izwebz đều là các bài viết căn bản, các bạn có thể xem các bài viết theo các chuyên mục ở menu phía trên hay là các bạn có thể xem ở link Video series này. Tuy nhiên, quá trình tự học của chúng ta thì cụ thể như vậy nhé HTML+CSS + Photoshop > Jquery (nếu cần) > PHP > WordPress. Đó là đối với các bạn đang tự học tại gia, còn nếu đi trung tâm thì đã có giáo trình riêng và các bài giảng ở izwebz chỉ mang tính chất tham khảo và bổ trợ.

CÔNG CỤ NÀO TỐT NHẤT

Hiện tai trên thị trường có rất nhiều phầm mềm hổ trợ chúng ta trong việc thiết kế và lập trình web (tham khảo Top 10 trình soạn thảo code), miễn phí cũng có mà có phí thì cũng đầy? Vậy chọn cái nào để làm bây giờ ?
Bạn phải hiểu rằng, không có phần mềm nào gọi là tốt nhất cho tất cả, mà phần mềm tốt nhất chính là phần mềm mà chúng ta quen sử dụng, và nó dể dàng giúp đở chúng ta trong các thao tác và phím tắt. Khi bạn xem video tutorial của anh DW, CS hay của tớ hoặc bất kì thành viên nào của izwebz thì bạn sẽ thấy rằng, mỗi người thích một editor khác nhau, nguyên nhân là vì nó phù hợp với họ.
Và tất nhiên, nếu bạn là người mới thì hãy trải nghiệm đi, bạn sẽ tìm ra phần mềm nào phù hợp với mình nhất và hãy tìm hiểu về nó kĩ hơn.
Đối với dân webdesigner thì photoshop, illustrator hoặc corel là những phần mềm mà nhà tuyển dụng yêu cầu là bắt buộc phải có.

TỔNG KẾT

Chúng ta có thể thấy rằng, để làm được một website thì phải trải qua nhiều giai đoạn “Ý tưởng > phát thảo ý tưởng > thiết kế ý tưởng bằng PTS > chuyển từ PTS sang web tĩnh > Chuyển từ web tĩnh sang web động”. Mỗi giao đoạn nó điều đòi hỏi chúng ta phải có kiến thức nhất định về nó thì mới có thể làm tốt được. Do đó, nghề làm web không đơn giản như chúng ta tưởng, đây có thể coi là một môn nghệ thuật rèn luyện tính kiên nhẫn.

Chúc các bạn thành công và hi vọng bài này sẽ có thể định hướng được cho các bạn trong tương lai. Mọi chi tiết xin vui lòng liên hệ izwebz.art@gmail.com (Minh Mẫn).

Smashing Magazine

Được thành lập vào năng 2006, Smashing Magazine (SM) là một tạp chí trực tuyến, cung cấp thông tin hữu ích về lĩnh vực thiết kế, đồ họa Web. Họ luôn cung cấp những thông tin bổ ích trong lĩnh vực. Với lượng bài viết lên tới 1302 và có 476748 hình ảnh được SM đăng tải và công bố.
Ngoài ra, SM còn cung cấp mục Coding, nơi mà bạn có thể học những thủ thuật thú vị về Jquery/Wordpress/HTML/CSS/PHP. Shop của SM còn có những quyển sách thú vị và độc đáo mà bạn có thể mua (tất nhiên là tiếng Anh).
Bạn hãy một lần vào SM mà cảm nhận những tác phẩm đồ họa thật độc đáo của các tác giả hàng đầu trên thế giới nhá.

Power to the Poster

Nếu bạn là một Art Designer thì đây là website mà bạn không thể bỏ qua được. Có rất rất nhiều Poster đủ mọi thể loại khác nhau được đăng tải tại đây. Những poster đầy màu sắc và rất sáng tạo của các tác giả từ khắp nơi quy tụ về đây. Ngoài việc xem, tham khảo, bạn còn có thể download file PDF chất lượng cao về máy và in ra nữa. Rất thú vị !!!

Deviant Art

Được thành lập vào 8/2000. Website được tạo ra nhằm để giải trí, truyền cảm hứng cho các designer từ mọi nơi trên thế giới. Hiện Deviant Art có 13 triệu thành viên, 35 triệu lược truy cập mỗi tháng, khổng lồ phải không các bạn. Bạn hãy vào đây và xem những tác phẩm đầy thú vị, từ mọi thể loại như vẽ tay, chụp ảnh, web design, Catoon, Comic, Manga, v.v… Rất nhiều mục thú vị khác nữa, bạn hãy vào đó và tự trãi nghiệm nhé.

Action Scrpit Tutorials

Có một thời gian mình rất mê Flash, nhưng mà do không có thời gian tìm hiểu sâu nên mình bỏ. Tuy nhiên thì mình cũng xin giới thiệu các bạn một trang cung cấp các bài giảng rất hay về Flash. Trang này cung cấp các bài học về Flash căn bản, các bài viết về AS 2 và AS 3. Active+ cũng là một sản phẩm của Envato nữa đó.

Kết luận

Qua loạt bài viết “Nguồn của tôi” thì các bạn chắc hẳn đã biết thêm nhiều trang web hay và học hỏi được nhiều kinh nghiệm từ các trang web đó. Chúc các bạn thành công và đạt được nhiều thành công trên con đường thiết kế và lập trình web.

Bạn nào có nguồn hay, hãy viết 1 bài từ 5-10 dòng và email về cho mình để chia sẽ cùng bạn bè trên izwebz. Email: izwebz.art@gmail.com

Các bài viết cùng series Nguồn của tôi

• Nguồn thiết kế
• Nguồn ý tưởng
• Nguồn lập trình
• Quản lý nguồn

PHP Việt Nam Portal

Cổng thông tin PHP Việt Nam được thành lập với mục đích là giúp đỡ cho các bạn nào yêu thích và muốn tự mày mò học về PHP. Các bài học được chia làm 5 cấp bật khác nhau từ để tới khó.

• Level 1: Các kiến thức căn bản
• Level 2: Giới thiệu về HTML
• Level 3: Giới thiệu về CSS
• Level 4: PHP căn bản
• Level 5: Các vấn đề nâng cao

Những kiến thức về PHP mà mình có cũng đều xuất phát từ đây đó. Quả thật rất khó tìm được nguồn tài nguyên nào có đầy đủ bằng tiếng Việt như vậy. Ngoài ra, ban quản trị còn chiêu sinh mở các lớp học trực tuyến về HTML/CSS/PHP và CMS như Joomla với chi phí khá rẻ so với thị trường.

Free Code Việt Nam

FCVN là một trong những cộng đồng coder lớn nhất Việt Nam. Hiện nay thì FCVN có 149,663 thành viên và có khoảng 93.800 bài viết. Quả là một thư viện rất lớn phải không các bạn. Trong FCVN có nhiều chuyên mục rất hấp dẫn, đặc biệt là các chuyên mục về ExtreMedia, VBB, PHP, Web Design.

Mình đã tham gia FCVN từ lúc mới tập tành làm web, cho tới bây giờ cũng đã 4-5 năm rồi, hỏi cũng nhiều, trả lời cùng nhiều. Và các bạn có thắc mắc gì, cứ việc vào đây tìm kiếm và cùng nhau trao đổi. Với lượng thành viên và quản lý đông, giàu kình nghiệm, họ luôn giải quyết các thắc mắc của các bạn vừa vào nghệ. Ngoài ra thì FCVN có rất nhiều các mẫu template, intro, mà nguồn mở PHP (tin tức, âm nhạc, phim,…) của Việt Nam mình viết và thiết kế được chia sẽ một cách miễn phí.

Net tuts

Một sản phẩm của ông chùm Envato đây, trang này chuyên cung cấp các bài viết về phát triển web. Bao gồm các lĩnh vực như HTML, CSS, Javascript, CMS, PHP, ASP.NET và Ruby on Rails. Cũng với đội ngũ chuyện nghiệp, dày đặn kinh nghiệp, họ luôn cung cấp cho chúng ta những bài viết vô cùng sáng tạo và phong phú. Ngoài các bài viết căn bản trong mục Basix họ còn có nhiều Tips, các bài học nâng cao. Hãy thường xuyên theo dõi những bào viết, video của họ nhá.

W3C

Với tên tiếng Anh đầy đủ là “World Wide Web Consortium”, là một tổ chức với những nhân viên từ khắp nơi trên thế giới cùng nhau phát triển các bài học về web một cách chuẩn nhất. Họ đặt ra cho mình nhiệm vụ là đánh thức tiềm năng của các người ham học hỏi, từ đó tạo nên một cộng đồng cùng phát triển lâu dài. Ngoài việc hướng dẫn học, W3C còn tạo điều kiện công việc cho những người thật sự tài năng và còn có học bổng cho các bạn ham học hỏi nữa. Hãy cố gắng lên nhá, biết đâu bạn là người đạt được học bổng thì sao?

W3Schools

Được thành lập từ năm 1998, với câu slogan là “W3Schools Will Always Be Free”, có nghĩa là “W3schools luôn luôn miễn phí”. Với mình, website này giống như một cuốn từ điển về HTML vậy, bạn không hiểu về tag html nào, cứ vào đây tìm kiếm, sẽ có tất cả. Ngoài HTML 4.01 thì còn có cả HTML5, ngoài ra còn có CSS (level 2-3), Script (Java Script, VB Script, …), SQL, PHP, … Còn nhiều nữa, bạn hãy tự mình vào và khám phá đi nào.

HTMLDOG

Cái tên ngộ quá phải không các bạn. HTMLDOG được thành lập vào năm 2003, và hiện tại thì có hơn 1.5 triệu lược truy cập mỗi tháng. Với người chủ là Patrick Griffiths, có dầy dạng kinh nghiệm về HTML và CSS, anh từng là việc cho các dự án của chính phủ Anh, hãng điện thoại vodafone, v.v… Các bài học trên HTMLDOG được chia làm 2 loại là căn bản và nâng cao, nên các bạn sẽ dễ dàng tiếp thu.

Jquery

Dự án Jquery được thành lập vào tháng 9/2009. Đây là một thư viện Javascript miễn phí được cung cấp với tư cách của một mã nguồn mở. Với jquery thì bạn có thể tạo ra các hiệu ứng tuyệt vời cho website của mình. Bạn có thể xem một vài demo sau: QuickSand, Text with Moving Backgrounds, Zoomer Gallery.
Trong trang Docs của Jquery thì bạn có thể học từ căn bản tới nâng cao và đều được sắp xếp theo thư mục riêng như Selectors, Event, Effect .. v.v… và tất cả đều có ví dụ riêng nên bạn có thể dể dàng tiếp thu được. Mình chắc chắn rằng đây là một website mà bạn không thể bỏ qua được đấy.

PHP.NET

Các bạn biết không? Khi mà mình không biết ý nghĩa hay tính chất của một hàm nào đó trong PHP thì PHP.NET là nơi đâu tiên mà mình hướng tới. Mọi hàm của php đều được tìm thấy ở đây. Ngoài ra còn có ví dụ và kết quả nữa, rất dể hiểu.
Nếu bạn nào xài trình duyệt Chrome thì có thể cài extension PHP documentation do chính các kĩ thuật viên của PHP.net phát triển, rất tiện dụng. Bạn hãy thử xem sao nhé.

Kết luận

Hiện tại trên mạng thì có khá nhiều các trang khác cũng chia sẽ những bài học bổ ích về lập trình, tuy nhiên thì đây là những trang nằm trong danh sách bookmark của mình. Hi vọng rằng các website trên sẽ cung cấp được cho các bạn các kiến thức cần thiết trong quá trình học lập trình web.
Trong bài tiếp theo thì mình sẽ hướng dẫn cho các bạn quản lý các nguồn của bạn để dễ dàng có thể cập nhật. Và trong bài tiếp thì sẽ có vài nguồn khác mình muốn giới thiệu với các bạn.

Nếu như có nguồn nào mà bạn muốn chia sẽ cho izwebz biết, hãy viết ngắn gọn từ 5-10 dòng và email về cho mình. Email: izwebz.art@gmail.com

Các bài viết cùng series Nguồn của tôi

• Nguồn thiết kế
• Nguồn ý tưởng
• Nguồn lập trình
• Quản lý nguồn

Liều thuốc Quên

Đôi lúc thì đối mặt trực tiếp không giải quyết được vấn đề gì đâu các bạn. Nếu các bạn cứ căn óc, mở hai mắt ra mà đối mặt thì hậu quả sẽ là các bạn sẽ bị stress nặng đấy. Cho nên, lời khuyên của mình là hãy Start > Shutdown cái máy tính. Rời bàn làm việc và gọi cho những người bạn thân, các bạn có thể đi giải trí ở đâu đó tùy ý như đi xem phim, đá banh, đánh banh, tenis,… rất nhiều các bạn ạ, mỗi người một sở thích mà, riêng mình thì phim hài của Châu Tinh Trì là lựa chọn số 1. Các bạn có thể dành một ngày để vui chơi, lúc đó, đầu ốc của mình sẽ trở nên cực kì thoái mái. Có thể ý tưởng sẽ tới lúc vui chơi, cũng có thể nó sẽ xuất hiện trong giấc ngủ chẳng hạn. ^^! Và hãy bắt đầu công việc vào ngày hôm sau với tình thần thật thoải mái.

Liều thuốc Notebook

Đôi lúc, ý tưởng chợt ùa về, lúc đó bạn sẽ làm thế nào nhỉ? Tớ thì có một cuốn notebook, lúc nào cũng có bên mình, có ý tưởng thì vẽ ra ngay và để dành đó. Sẽ có những lúc death-line cận kề rồi mà ý tưởng nó cứ ở đâu đâu ấy, chưa về tới. Lúc này cuốn notebook lại là vũ khí quan trọng đấy. Những ý tưởng mà mình lưu lại thì bây giờ lại thật sự rất cần thiết. (Hình phía trên là 2 mẫu thiết kế trong notebook của mình)

Giao lưu ý tưởng

Các bạn ạ, đôi lúc thoải mái mà ý tưởng vẫn chưa ra thì mình mời các bạn lướt qua những trang web dưới đây. Nó sẽ giúp ích rất nhiều cho các bạn đấy.

Awwwards

AW là một website được thành lập nhầm công nhận những tài năng trong làng Webdesign. Họ có một ban giám khảo là những nhà thiết kế, những bloger tài năng trên thế giới. Với thang điểm 10 bao gồm 50% Design, 25% Creativity, 10%Content và 15% Usability. Mình chắc rằng, khi bạn bí ý tưởng, vào đây dạo một vòng, trở ra hít thở thật sâu, thế là lại có ý tưởng.
Nếu bạn có một thiết kế và tự tin bạn cũng có thể dự thi với 21.6$. Nếu thắng giải thì bạn sẽ được 1 sticker nho nhỏ ở góc website, trông rất là ngầu. Hiện mình cũng đang cố gắng hoàn thiện một bản thiết kế để đem đi thi xem thế nào.

The Best Designs

TBD được thành lập vào năm 2001, và năm nay chính là sinh nhật tròn 10 tuổi của họ đó. TBD có khoảng 4000 website được lưu trữ, với nhiều thế kế đa dạng, nhiều sắc màu, nhiều ý tưỡng rất lạ và bắt mắt đều tập trung ở đây. Mỗi năm họ có hàng ngàn thiết kế dự thi, nhưng chỉ một số ít trong đó được đăng lên web. Mình nghĩ rằng, đây là một website giúp bạn mở mang trí óc, vương cánh với năm châu.

Creattica

Creattica là một bộ sưu tập tuyệt vời truyền cảm hứng cho bất kì nhà thiết kế nào. Mỗi ngày có hàng ngàn người truy cập. Bạn hãy tạo cho mình một tài khoãn (hoàn toàn miễn phí) và chia sẽ những thiết kế của mình. Hiện đang có 11406 mẫu thiết kế đủ mọi thể loại từ 3544 nhà thiết kế. Đây sẽ là bộ thư viện mà bạn không thể bỏ qua lúc đang gặp khó khăn trong việc thiết kế. Các tác phẩm từ nhiều người ở khắp nơi trên thế giới chắc chắn sẽ là nguồn cảm hứng cho bạn.

Kết luận

Ở trên chỉ là những chia sẽ của riêng mình, còn bạn thì sao nhỉ? Bạn có cách gì để vượt qua rắc rối trên? Hãy mail ngay cho mình và chia sẽ cách mà bạn vượt qua được căn bệnh “Cạn ý tưởng” để mình bổ sung vào bài viết cho thêm sinh động nha các bạn.
Trong bài tiếp theo thì sẽ là bài về “Nguồn lập trình“, mình sẽ giới thiệu những nơi mà bạn có thể học hỏi và trao đổi kiến thức về lập trình web HTML/CSS/PHP.
Email: izwebz.art@gmail.com hoặc duongpho.net@gmail.com

Các bài viết cùng series Nguồn của tôi

• Nguồn thiết kế
• Nguồn ý tưởng
• Nguồn lập trình
• Quản lý nguồn

Thư viện Font miễn phí – Dafont

Dafont hiện đang có 12,486 font với nhiều thể loại khác nhau như viết tay (Grafitti, viết ẩu…), nét thường, font theo ngày lễ (hallowen, valentine) và còn nhiều thể loại khác nữa. Các font trên dafont hầu hết đều cho bạn tải miễn phí, nếu như có khả năng thì nên donate cho font của họ. Tuy nhiên bạn cũng phải xem các qui định về chia sẽ trong tập tin Readme.txt kèm theo tập tin nén khi download về.

UTM font cho người Việt – Font chữ đẹp UTM

Đây là trang portfolio của anh Michael Đinh Trung Kiên, hiện đang là Graphic designer, bắt đầu thiết kế font từ năm 2003 với font VNI-Ong Do là tác phẩm đầu tay. UTM là là viết tắt của Unicode Thiên Minh, bộ font có rất nhiều thể loại (viết tay, nét đậm, trang trí, chúc mừng năm mới), và mang đậm phong cách phương Tây lẫn phương Đông. Và hai font mà mình thực sự thích trong bộ font UTM đó là UTM Neo Sans Intel và UTM Avo, vừa mang phong cách Tây, vừa gõ được tiếng Việt. Là một webdesigner thì chắc chắn rằng UTM là một bộ font mà bạn cần phải có.

Free Icon – Iconfinder

Với 155,756 icon được đăng tải và 810 icon sets được tạo ra, và tất cả đều được tải miễn phí. Wow!!! Thật tuyệt vời phải không các bạn. Đây là nơi mà mình tìm kiếm và download icon miễn phí cho các thiết kế của mình. Chỉ việc gõ từ khóa mà bạn muốn kiếm như heart, arrow, icon, facebook chẵng hạn, tất cả đều có.

Free Vectors – Vecteezy

Được thành lập vào năm 2007 bởi anh chàng Shawn, nó nhanh cóng trở thành một website chia sẽ vector miễn phí lớn. Với khẩu hiệu “Stupid Name. Cool Vector Art!”, Vecteezy tập hợp nhiều mẫu vector từ các nhà thiết kế trên thế giới tạo thành một nguồn lớn cho bạn lựa chọn. Các vector đều được tải và sử dụng miễn phí cho các dự án đồ họa và thiết kế của bạn. Tuy nhiên, khi tải về bạn phải đồng ý với những quy định do nhà thiết kế đề ra khi tải về sử dụng.

Free PSD Brushes – Brusheezy

Đây cũng là một sản phẩm nữa của anh chàng Shawn, hiện nay thì có thêm 2 người nữa cùng phát triển Jonathan và Erin. Mỗi tháng có hơn 1,2 triệu lượt download, và đang có hơn một ngàn thành viên cùng hoạt động chia sẽ trên brusheezy. Ngoài các brush mẫu thì website này còn cung cấp cả các patern, action, file psd,v.v… Chắc chắn rằng đây là nguồn mà bạn không thể bỏ qua được trong quá trình thiết kế.

Hình ảnh miễn phí – SXC

SXC đã được đưa ra vào tháng 2/2001 như một sự thay thế cho các nhà thiết kế không thể mua được các ảnh với chất lượng cao và đắt tiền ở các website khác. Ý tưởng là tạo ra một trang web nơi mà những người sáng tạo có thể trao đổi hình ảnh của họ để tìm cảm hứng làm việc. Trang web đã phát triển thành cộng đồng lớn với hơn 2.5 triệu thành viên và khoảng 400.000 hình ảnh trực tuyến từ 30.000 nhíp ảnh trên toàn thế giới được đăng tải với nhiều thể loại khác nhau (thiên nhiên, chất liệu, kiến trúc, …..) bạn chỉ vào và gõ từ khóa mình cần tìm, tiếng Anh thôi nhá.

Kuler Color

Với chủ đề “Explore, create and share color themes” tạm dịch là “Khám phá, sáng tạo và chia sẽ màu sắc”. Kuler là một sản phẩm của ông trùm đồ họa Adobe. Với mục đích là tạo ra những bộ sưu tập màu sắc, giúp cho bạn nhanh chóng trong việc lựa chọn màu sắc cho thiết kế của mình. Với hàng ngàn bộ sưu tập được tạo ra, thì đây chắc hẵn sẽ là website mà bạn không thể bỏ qua được. Bộ công cụ này sẽ được mình giới thiệu rõ hơn trong bài 3 của series về màu sắc trong thiết kế. Đón xem nghen.

PSD Tutorials Plus

PSD+ thuộc hệ thống của Envato, với một đội ngũ năng động, sáng tạo, và giàu trí tưởng tượng từ khắp các nơi trên thế giới. Họ cung cấp các bài viết chia sẽ kinh nghiệm, video tutorial về photoshop từ căn bản tới nâng cao. Với cách làm việc đầy kinh ngiệm và thâm thiện chắc chắn sẽ cung cấp cho bạn những bài hướng dẫn đầy chất lượng.

Webdesign Tutorials Plus

Webdesign+ cũng thuộc hệ thống Envato, nhưng khác với PSD+. Họ chỉ cung cấp các tư liệu về thiết kế web, cũng với một đội ngũ sáng tạo, và đầy đặng kinh nghiệm về WordPress, webdesign, html/css. Cũng với kiến thức từ căn bản tới nâng cao, các công nghệ hiện đại như HTML5 và CSS3, và còn có nhiều những tip rất hay khác đang đợi bạn khám phá.

Kết luận

Chà chà, rất nhiều đúng không các bạn. Nhưng mà đó chỉ là “Nguồn thiết kế thôi”. Trong phần sau, mình sẽ giới thiệu với các bạn “Nguồn ý tưởng”, trong bài này mình sẽ giới thiệu về những nơi mà bạn có thể học hỏi kinh nghiệm cùng chiêm ngưỡng và thả mình cùng óc sáng tạo của các webdesigner trên toàn thế giới.

Các nguồn phía trên chỉ là của riêng tớ thôi, mình nghĩ rằng các bạn cũng có những nguồn riêng của mình nữa. bạn hãy viết một bài về nguồn của mình và gửi về cho mình theo email: izwebz.art@gmail.com hoặc duongpho.net@gmail.com. Để mình bổ sung bài viết thêm hấp dẫn và sinh động hơn.

Chú ý: bài viết của bạn phải có hình minh họa, dài từ 5-10 dòng, hình có thể để trong file word hoặc attack vào email.

Các bài viết cùng series Nguồn của tôi

• Nguồn thiết kế
• Nguồn ý tưởng
• Nguồn lập trình
• Quản lý nguồn

Trang web thông tin – tin tức

Đặc điểm: Có chức năng cung cấp thông tin, có thể về một lĩnh vực nhất định (về thể thao, chính trị), hoặc có thể là nhiều lĩnh vực thường là các website của các tòa soạn báo như tuổi trẻ, thanh niên hoặc các trang báo điện tử (kênh 14, vnexpress,…)
Được cập nhật hàng ngày, hàng tuần và thậm chí từng giờ, từng phút ( đối với các website về chứng khoán hoặc tài chính).
Các website tham khảo:Vnexpress, Báo tuổi trẻ, Kênh 14
Lưu ý:

• Nên: Nguồn thông tin nhanh chóng, cập nhật liên tục và chính xác. Thiết kế phải đơn giản, gọn nhẹ, không dùng nhiều hình ảnh cho phần giao diện của website, đặc biệt quan tâm màu của phần nền và chữ. Tốc độ truy cập nhanh.
• Không nên: Đưa những thông tin sai lệch, thiếu chính xác (xem bài “Nguyên tắc ABC“), bố trí nội dung không phù hợp. Thiết kế chứa quá nhiều hình ảnh (làm người xem phải đợi lâu khi load).

Trang web về thương mại dịch vụ (E-commerce)

Đặc điểm: Đây là website của doanh nghiệp, các cơ quan cung cấp dịch vụ, các cửa hàng…. Loại website này có hai mục đích chính là: giới thiệu sản phẩm và bán sản phẩm tới cho khách hàng.
Các website tham khảo: Nhân hòa, Travel, Paypal
Lưu ý:

• Nên: Thông tin về sản phẩm phải thể hiện rõ ràng, có trật tự, bố trí tốt nhất để khách hàng có thể nhận biết được các đặc tính quan trọng và nổi bật của sản phẩm, đặc biệt là phải có giá phải rõ ràng (giá bán lẽ hay bán sĩ, giá đã bao gồm thuế hay chưa?). Màu sắc cần theo màu chủ đạo của cửa hàng hay sản phẩm, dịch vụ.
• Khuyến khích dùng thiết kế Z-Layout sẽ đạt hiệu quả cao.
• Không nên: Sử dụng các loại thiết kế, phức tạp, quá phá cách, nền và nội dung quá chói, khiến người xem khó chịu. Không niên yết giá sản phẩm, dịch vụ hoặc giá không rõ ràng.
• Đối với các website về dịch vụ như du lịch: không nên dùng hình ảnh hư thực, khẩu hiệu dùng những kĩ thuật hiệu ứng hình ảnh không cần thiết.

Website về văn hóa – nghệ thuật

Đặc điểm: là website về văn hóa nghệ thuật như hội họa, thơ văn, nhíp ảnh hay tôn giáo. Website này có thể cung cấp thông tin về lịch sử (sự ra đời của môn nghệ thuật), nhân vật (thi sĩ, họa sĩ), tác phẩm (thơ, văn, tranh ảnh) v.v…
Website tham khảo: Họa sĩ Việt Nam, Poetry,Art Web, Poetry foundation
Lưu ý:

• Nên: Màu sắc, cách thể hiện nên phù hợp với từng loại hình văn hóa nghệ thuật. Giao diện website phải thể hiện được chủ đề, thông tin chính cho loại hình website. Nếu là website nghệ thuật nên có một chút phá cách nhưng phải theo khuôn khổ của loại hình nghệ thuật. Logo cần phải tinh tế, diễn tả được nội dung của môn nghệ thuật.
• Không nên: Những bài viết không theo tiêu chí của website. Thiết kế hoa hòe, lòe loẹt, không theo đúng chủ đề của website.
• Đối với các website về văn hóa: không nên đăng các quảng cáo nhạy cảm.

Website giải trí

Đặc điểm: Là website mang tính chất giải trí hoặc kinh doanh bằng hình thức giải trí. Ví dụ: các website nghe nhạc, xem phim, webgame, hình ảnh vui, đánh bạc, casino v.v…
Website tham khảo:Zing Mp3, Youtube, Vimeo, Tuyện cười tiếu lâm
Lưu ý:

• Nên: Dùng các màu sắc nhẹ nhàng, mang tính chất thư giản (xanh da trời, xanh lá,…). Nội dung nên phong phú, đang dạng.
• Không nên: Dùng màu nặng nề (đỏ, tím), gợi buồn. Nội dung quá nhàm chán, cập nhật nội dung chậm chạm. Đang tải các nội dung thiên về chính trị, tôn giáo. Đang tải quảng cáo quá nhiều, gây phiền phức.

Website học tập nghiên cứu

Đặc điểm: thường được xây dựng dưới dạng forum hoặc blog chia sẽ. Giao diện đơn giản, gọn gàng. Mục đích, chia sẽ kiến thức, công trình nghiên cứu. Thường là các website phi thương mại. Nội dung do thành viên tự nguyện cung cấp.
Website tham khảo:Izwebz, Webdesign+, Psd+
Lưu ý:

• Nên: Màu sắc cuốn hút, nghiêm túc, sạch sẽ. Nội dung phải được xếp gọn gàng theo chức năng và phải có hệ thống phân cấp bậc. Giao diện thiết kế phù hợp với đối tượng.
• Không nên: Thương mại hóa các bài giải, công trình nghiên cứu được thành viên chia sẽ. Đang tải quá nhiều quảng cáo flash. Các popup gây phiền cho người xem.

Website cá nhân (Portfolio)

Đặc điểm: giới thiệu về một nhân vật nào đó (ca sĩ, diễn viên,…) hay chính bản thân của người thiết kế. Mỗi freelancer thường có một website cá nhân riêng, để thể hiện các tác phẩm, bản thân, các kỹ năng, và liên hệ, .v.v….
Website tham khảo:eurors cg colombia, Egopop, Awwwards
Lưu ý:

• Nên: Tạo một phong cách riêng từ tên miền, cho tới nội dung, cách thiết kế. Thể hiện được cá tính độc lập, phải có đầy đủ thông tin về bản thân, cách thức liên hệ, sản phẩm đã tường làm, khách hàng đã từng cộng tác.
• Thiết kế phải mang tính chất sáng tạo, mang tính chất phá cách và phải có dấu ấn riêng, mang gu thẩm mỹ của riêng mình. Nên dùng từ 2 ngôn ngữ trở lên.
• Nên có Blog riêng để chia sẽ về các kinh nghiệm, bài hướng dẫn, về cuộc sống,v.v….
• Không nên: thiếu thông tin hoặc thông tin không chính xác. Không có sản phẩm minh họa. Thiết kế trùng lấp hoặc lấy ý tưởng của người khác.
]]> http://www.izwebz.com/design-usability/phan-tich-cac-th%e1%bb%83-lo%e1%ba%a1i-website-nen-va-khong-nen/feed/ 37 http://www.izwebz.com/design-usability/mau-sac-trong-thiet-ke-phan-1/ http://www.izwebz.com/design-usability/mau-sac-trong-thiet-ke-phan-1/#comments Sun, 05 Jun 2011 13:00:34 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2974 Màu sắc là một phần trong cuộc sống của chúng ta và đối với một người thiết kế thì màu sắc vô cùng quan trọng. Một sản phẩm đẹp là sự phối hợp hoàn hảo của bố cục và màu sắc. Do đó, màu sắc phù hợp sẽ làm cho thiết kế trở nên sinh động, bắt mắt và nó trực tiếp tác động đến cảm tình của người xem. Trong bài nay, mình sẽ giới thiệu với các bạn định nghĩa về màu sắc, các hệ màu, các gam màu trong thiết kế.

Phần 1: Màu sắc và phân loại màu sắc

Màu sắc là gì?

Màu sắc đã có từ rất lâu, nhưng mà vẫn chưa có một định nghĩa chung nào dành cho màu sắc. Và có lẽ con người là một trong những sinh vật may mắn nhất có thể nhận biết được màu sắc. Thông thường, mắt người nhận biết được vô vàn màu sắc và các màu sắc đó luôn biến đổi dựa trên mối tương quan giữa ánh sáng và góc nhìn.


Hình ảnh minh họa

Màu sắc trong thiết kế

Trong thiết kế, màu sắc tạo nên sức hút, tâm lý và phong cách. Người ta có thể dùng nghệ thuật phối màu để nói lên ý tưởng của mình mà không cần đến lời nói hay câu văn.

Màu sắc ngoài cái đẹp trời cho còn có một chiều sâu kín đáo, chính cái điều kỳ diệu ấy làm rung động lòng người. Tất nhiên không phải lúc nào màu sắc cũng đẹp, không phải lúc nào màu sắc cũng hài hoà. Vì vậy nghệ thuật phối màu sẽ bù đắp những khuyết điểm đó.

Màu sắc luôn tác động đến cuộc sống của chúng ta. Màu sắc có ngôn ngữ riêng của nó mà chúng ta phải tự cảm nhận. Màu sắc có sức mạnh làm tâm hồn chúng ta rung động.

Các hệ màu trong thiết kế

RGB – Đỏ (Red) Xanh lá cây (Green) và Xanh da trời (Blue). Đây là hệ màu được sử dụng nhiều nhất. Và cũng là hệ màu căn bản và phổ biến nhất trong thiết kế website và chỉnh sửa hình ảnh. Với 3 màu cơ bản này chúng ta có thể phối thành hàng tỉ màu khác, tùy vào mục đích sử dụng.


Hệ màu RGB

CMYK – Hệ màu này chủ yếu được dung trong in ấn sách báo, tạp chí, v.v. Là sự phối hợp giữa Cyan (da trời), Magenta (tím), Yellow (vàng) và black (đen).


Hệ màu CMYK

Lap – là một không gian màu độc lập và chỉnh sửa màu trong hệ của nó là một công việc thú vị vì một sự di chuyển nhẹ nhàng trên kênh a hoặc kênh b cũng tạo ra những thay đổi mạnh mẽ nhất về màu sắc. Lab là hệ màu rất thích hợp trong chỉnh sửa ảnh KTS.


Hệ màu LAP

Hệ màu HSB -Hue liên quan đến màu sắc, Saturation (độ thấm qua) xác định số lượng màu sắc và Brightness (độ chói) liên quan đến số lượng ánh sáng có trong màu sắc. HSB thường được dùng trong việc chỉnh sửa ảnh chân dung.


Hệ màu HSB

Các gam màu sắc

Được chia làm 8 loại

Màu nóng: Màu nóng tự mang trong nó sự lôi cuốn và gây chú ý, có tính phản chiếu cao. Tạo nên những ý tưởng tươi vui, cởi mở, kích động, … Nó có tác động mạnh mẽ đến không gian trong bố cục chung. Màu nóng gồm 2 màu chính là đỏ và vàng cùng các màu tương cận của chúng (như cam, hồng, tím đỏ, vàng xanh lục…).

Màu lạnh: những màu cho ta cảm giác mát mẻ, ví dụ như: xanh lam, xanh lá cây, đen, tím…… Màu lạnh làm cho bức hình cảm giác tươi tắn, toả sáng, gợi cảm giác mát mẻ, nhẹ nhàng. Màu lạnh đối lập với màu nóng.


Màu nóng và màu lạnh

Màu tương phản: là sự đối lập của màu nóng và màu lạnh. Tương phản với các hệ thống các màu gốc: Xanh = C, Vàng = Y, Đỏ = M, nhờ có màu tương phản mà bức hình đạt được sự rực rỡ.

Màu tương phản thường là những màu gốc hoặc có tính gốc cao. Bản thân các màu này có độ mạnh thị giác cao, nên khi đặt cạnh nhau trong một bố cục, các màu sẽ tạo nên thị cảm mạnh. Với những màu nóng và lạnh đứng cạnh nhau, sự tương phản sẽ dịu hơn nếu được thay đổi độ sáng tối.

Màu tương đồng: Với những màu cùng Gam nóng hoặc lạnh có một sự tương quan nhất định, chúng được gọi là màu cùng tone, hoặc màu tương đồng. Trong thực tế, màu tương đồng vẫn có thể chứa một lượng màu tương phản hoặc ngược lại, vấn đề là phải xem xét lượng màu trên một diện tích và vai trò của nó đến quan hệ hoà sắc.


Màu tương đồng

Màu vô sắc: Là những màu mà khi ta hoà trộn chúng với nhau không tạo nên được màu mới. Ví dụ đen, trắng và các thang độ xám khi được hoà trộn.


Màu vô sắc

Màu bổ túc: Những cặp màu bổ túc là những cặp màu có tính tương phản mạnh, gồm có những cặp màu cơ bản sau đây. Đỏ – Xanh lục, Da cam – Xanh lam, Vàng – Tím. Những màu này không thể gây cảm cảm giác đồng thời đối với con người, chẳng hạn không thể có một màu gọi là “đỏ – lục” hoặc “vàng – tím”. Điều này tương tự cảm giác về nhiệt độ, không có cảm giác nào được gọi là cảm giác “nóng – lạnh”, mà là “nóng” hoặc “lạnh”.

Màu sắc độ: Đây là thuật ngữ để chỉ độ đậm nhạt của từng loại màu. Sự thay đổi này phụ thuộc vào việc ta cộng thêm màu đen hay màu trắng cho màu gốc để tạo nên các dải màu. Màu trắng sẽ cho ta màu sáng hơn còn màu đen thì ngược lại.

Màu sắc điệu: Là khái niệm chỉ sự biến thiên của màu sắc. Sự kết hợp giữa các màu hữu sắc sẽ cho ta thấy điều này. Bạn có thể dễ dàng hiểu được thế nào là một bức hình “ ngả vàng”, tone xanh hay thiên đỏ… đó chính là hiệu quả của sự kết hợp các màu. Màu đen, trắng và xám không có sắc điệu mà chỉ có sắc độ mà thôi.

Vòng tròn màu căn bản (The color wheel)

Vòng tròn màu căn bản có 12 cung chia đều theo hình nan quạt trên diện tích hình tròn, mỗi cung có 8 cấp độ màu đi dần vào tâm vòng tròn từ đậm đến nhạt. 12 cung x 8 cấp độ sẽ tạo ra 106 màu căn bản và được đánh số từ 1 đến 106 đó cũng là kí hiệu khi ta chọn màu.
Ví dụ: Số 1 là màu đỏ sậm nhất (C:0 – M:100 – Y:100 – K:45) số 36 là màu vàng tươi (C:0 – M:0 – Y:100 – K:0) số 84 (C:80 – M:100 – Y:0 – K:0) là màu tím rượu nếp than (híc nghe mà…thèm) số 68 (C:100 – M:60 – Y:0 – K:0) là màu xanh nước biển…


Hình ảnh minh họa

Vòng tròn màu căn bản được tạo ra từ 3 màu: Đỏ – Vàng – Lục lam. Từ ba màu này, màu sắc được pha lẫn hai màu với nhau .

Ví dụ như hình bên trên, ta pha 2 màu Blue+Yellow=Green, Red+Yellow=Orange, Red+Blue=Violet.
Rồi cứ hòa trộn với nhau như thế ta sẽ có hơn 3.400 màu thông dụng nhất trong thiết kế đồ hoạ và nếu cứ pha , pha và pha trộn mãi bạn sẽ có hàng ty tỷ sắc màu cho… riêng bạn.

]]> http://www.izwebz.com/design-usability/mau-sac-trong-thiet-ke-phan-1/feed/ 19 http://www.izwebz.com/design-usability/introduction-z-layout/ http://www.izwebz.com/design-usability/introduction-z-layout/#comments Thu, 19 May 2011 13:00:49 +0000 Võ Minh Mẫn http://www.izwebz.com/?p=2924 Z-Layout là một cách tuyệt vời để bắt đầu bất kỳ dự án thiết kế web. Bởi vì nó giúp web hoạt động có hiệu quả trong: hệ thống phân cấp, xây dựng thương hiệu, cấu trúc thiết kế, và kêu gọi hành động. Z-Layout là vũ khí lợi hại nếu nhà thiết kế website biết phối hợp cách bố trí của Z-Layout và ý tưởng của mình.


1/ Giới thiệu về Z-Layout

Bố cục Z-Layout thực sự là khá đơn giản: chỉ việc áp chữ Z lên bản thiết kế của mình. Đặt mục mà bạn muốn người xem nhìn thấy đầu tiên khi vào website ở đầu của chữ Z. Từ đó, mắt của người xem sẽ di chuyển theo chữ Z, và cho đến cuối chữ Z là mục tiêu. Bạn hướng người xem đi theo những nội dung mà bạn bố trí sẵn để xây dựng sự tin tưởng ở người xem và cuối cùng là kêu gọi hành động nào đó của họ.

Chúng ta hãy nhìn vào biểu đồ:

Chú ý rằng mình đã đánh số các điểm chính dọc theo chữ Z, đó là những đại diện cho thứ tự mà người xem sẽ xem nội dung trang. Và bạn hãy xem một layout thực tế phía dưới:

Bây giờ hãy áp chữ Z lên layout trên:

Đơn giản, phải không? Có chắc chắn không có gì phức tạp về bố trí này – nhưng nó nhanh chóng và hiệu quả, hướng mắt người xem đi từ điểm 1 đến điểm 4 theo một thứ tự hợp lý – kết thúc với lời kêu gọi mạnh mẽ để hành động. Và một vài lưu ý khi bạn thiết kế tại các điểm nút như sau:

• Chọn nền phù hợp để có thể thu hút được sự tập trung của người xem.
• Biểu tượng phải tạo được sự chú ý ngay từ điểm số #1, thường ở đây sẽ bố trí logo.
• Có thể thay đối màu sắc hoặc hình ảnh ở cuối điểm số #2 để hướng người xem đi theo chữ Z. Trong ví dụ là thay đổi màu sắc chữ signup.
• Một Images slider ấn tượng ở giữa, điều này sẽ làm giúp ta tách riêng được phần đầu và phần cuối của thiết kế, và hướng sự chú ý của người xem di chuyển từ điểm #2 sang điểm #3. Ở đây bạn nên để những hình ảnh về cty, sản phẩm, v.v…
• Một vài dòng thông tin ngắn gọn, điều này sẽ giúp cho người xem hỉu được bạn làm gì và bạn muốn gì ở họ. Tại điểm số #3 này, thông tin phải cực kì ngắn gọn và súc tích. Thường thì tại đây bạn sẽ để thông tin về dịch vụ, tầm nhìn, văn hóa công ty, v.v…
• Cuối cùng là một nút lớn kêu gọi hành động ở điểm số #4.

2/ Tại sao lại chọn Z-Layout ?

Z-layout chắc chắn không cần phải là giải pháp cuối cùng cho tất cả các trang web, nhưng nó thường là một lựa chọn tốt cho bất kỳ dự án thiết kế bởi vì nó đã hội tụ đủ 4 của các nguyên tắc và mục đích của một thiết kế hiệu quả:

• Xây dựng thương hiệu
• Hệ thống phân cấp
• Cấu trúc thiết kế
• Kêu gọi một hành động (từ thiện, quyên góp, đang ký, mua hàng,…)

3/ Một vài ví dụ về Z-Layout

1/ AVISIO


2/ Amnesia


3/ London Creative


4/ INFOCUS


5/ ARROWHEAD


Bạn có thể xem thêm tại đây


4/ Kết luận

Điều quan trọng cần lưu ý là Z-layout không phải là mô hình bố trí duy nhất, còn có nhiều bố trí khác tương ứng với bảng kí tự chữ cái. Z-Layout thông dụng bởi vì cách bố trí của nó đơn giản mà thỏa mãng nhiều tiêu chí của việc thiết kế website. Nếu có thể, mình sẽ giới thiệu với các bạn về F-Layout.

Bài viết có lẽ còn nhiều sơ sót, xin mọi người góp ý để bài viết hoàn thiện hơn.

]]> http://www.izwebz.com/design-usability/introduction-z-layout/feed/ 28 http://www.izwebz.com/design-usability/gio-hang-va-session/ http://www.izwebz.com/design-usability/gio-hang-va-session/#comments Tue, 19 Apr 2011 08:42:02 +0000 Clackken Smith http://www.izwebz.com/?p=2859 Có rất nhiều bạn hỏi tôi về cách để thực hiện một giỏ hàng. Và cái thắc mắc của các bạn nằm ở chỗ làm sao để thêm nhiều món hàng. Chạy lui chạy tới trên toàn trang lựa chọn sản phẩm thật ưng ý cho mình. Sau đó rồi mới thanh toán, và các thông tin sản phẩm khi thanh toán đều đầy đủ.

Điều quan trọng ở đây, cái mà các bạn chưa hiểu là làm cách nào, tuy rằng bạn đã sử dụng session khá nhiều cho công việc của mình, nhưng về giỏ hàng bạn lại suy nghĩ quá cao siêu. Thực tế hãy tưởng tượng, bạn đã gọi là giỏ hàng tức là một chỗ để quăng sản phẩm vào. Tương tự với chúng ta, khi khách hàng click mua món hàng thì chúng ta lấy nó quăng vào cái giỏ Session của chúng ta ^^.

Luôn luôn lưu ý rằng, ở tất cả những nơi mà muốn xử lý Seission thì :

<?php
/*
Khai báo sử dụng session ngay dòng đầu tiên.
 Đây là một thủ tục không thể thiếu trong Giỏ hàng bằng Session
*/
session_start();
?>

Đại loại như một mô hình mà tôi đã thiết kế cho Project của mình thế này.
1. Hình ảnh sản phẩm

2. Chọn sản phẩm

3. Đến và Xem giỏ hàng



Trong đoạn code HTML bạn sẽ để đại loại như thế này cho nút chọn mua

<input type="button" value="Chọn Mua" class="buy" title="9">

với title là một attribute chứa ID của sản phẩm cần ADD
+ Đoạn code jquery để lấy giá trị của title gửi đến trang xử lý và tạo Session như sau :

     $('.buy').click(function(){
           var str =$(this).attr('title');
           $.ajax({
                url :'create_order.php',
                data :'id='+str,
                dataType :'html',
                type : 'POST',
                success : function(html){
                    //Nội dung hiển thị khi hoàn thành
                }
           });
      });

Với trang PHP create_order.php

<?php
session_start();
    if(isset($_POST['id']) AND $_POST['id']!=''){
        $id = $_POST['id'];
        $manu = $_POST['manu'];
        $type = $_POST['type'];
        $color = $_POST['color'];
        $num = $_POST['num'];
        $_SESSION['s_pro'][] = array('id'=>$id,
                                         'manu'=>$manu,
                                         'type'=>$type,
                                         'color'=>$color,
                                         'num'=>$num);
        echo 'GREAT';
    }
?>

Như vậy cứ mỗi lần bấm Chọn mua thì sản phẩm đó sẽ được gửi đến trang create_order.php và được thêm vào mảng Session như trên hình. Sau khi đến trang GIỏ hàng, việc của bạn là chỉ việc cho phép hiển thị các thông tin đã được lưu trong mảng 2 chiều đó và xử lý đặt hàng vào Database chẳng hạn.

Như vậy việc chính xác bạn thấy rằng chúng ta hoàn toàn có thể sử dụng Session để làm cho giỏ hàng.

Demo : Đặt hàng USB 3G hoặc Đặt mua Hàng Hóa

Bài viết bởi Clackken Smith
Home page : Muagibando.com

]]> http://www.izwebz.com/design-usability/gio-hang-va-session/feed/ 46 http://www.izwebz.com/design-usability/t%e1%ba%a1-l%e1%bb%97i-va-ti%e1%ba%bfp-t%e1%bb%a5c-hanh-trinh/ http://www.izwebz.com/design-usability/t%e1%ba%a1-l%e1%bb%97i-va-ti%e1%ba%bfp-t%e1%bb%a5c-hanh-trinh/#comments Tue, 19 Apr 2011 03:18:15 +0000 Clackken Smith http://www.izwebz.com/?p=2854 Đầu tiên ! rất chân thành cám ơn các bạn vẫn đến với Izwebz trong thời gian qua. Trong khi sự vắng mặt của anh DW và tôi diễn ra trong một thời gian dài.

Sau một thời gian quay lại, tuy nói là quay lại nhưng tôi vẫn theo dõi từng ngày Izwebz để xem sự quan tâm của mọi người như thế nào ?. Tôi không tham gia trả lời nhiều để xem các bạn có học được gì không ? có giúp được bạn mình đang thắc mắc được gì không ? và điều đó đã cho tôi kết quả thật đáng như mong đợi.

Trong thời gian này, tôi không thể hoàn thành tiếp theo các serial mà mình đã xây dựng bởi vì lượng công việc quá nhiều từ đầu năm cho suốt đến bây giờ. Ngày hôm nay, công việc cũng đã tạm ổn và đi vào quỹ đạo tôi mới có thời gian để cùng mọi người tiếp tục duy trì các bài hướng dẫn

Cuối cùng điều tôi muốn nói trong bài viết ngắn này là : Cám ơn – Xin lỗi – Và cùng tiếp tục nào

]]> http://www.izwebz.com/design-usability/t%e1%ba%a1-l%e1%bb%97i-va-ti%e1%ba%bfp-t%e1%bb%a5c-hanh-trinh/feed/ 72